Replace `lib/dom-helpers.js` with `etch.dom`
DELETE
lib/dom-helpers.js
-const etch = require('etch');
-
-const tagNames = `
- a abbr address article aside audio b bdi bdo blockquote body button canvas
- caption cite code colgroup datalist dd del details dfn dialog div dl dt em
- fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 head header html i
- iframe ins kbd label legend li main map mark menu meter nav noscript object
- ol optgroup option output p pre progress q rp rt ruby s samp script section
- select small span strong style sub summary sup table tbody td textarea tfoot
- th thead time title tr u ul var video area base br col command embed hr img
- input keygen link meta param source track wbr svg
-`.split(/\s+/);
-
-function dom() {
- return etch.dom.apply(this, arguments)
-}
-
-tagNames.forEach(tagName => {
- dom[tagName] = (...args) => {
- return dom(tagName, ...args);
- }
-});
-
-module.exports = dom;

MODIFY
lib/find-view.js
lib/find-view.js
@@ -2,8 +2,6 @@ const _ = require('underscore-plus');
const {TextBuffer, TextEditor, CompositeDisposable} = require('atom');
const Util = require('./project/util');
const etch = require('etch');
-const h = require('virtual-dom/h');
-const $ = require('./dom-helpers');
module.exports =
class FindView {
@@ -30,63 +28,63 @@ class FindView {
render() {
return (
- $.div({tabIndex: -1, className: 'find-and-replace'},
- $.header({className: 'header'},
- $.span({ref: 'descriptionLabel', className: 'header-item description'},
+ etch.dom.div({tabIndex: -1, className: 'find-and-replace'},
+ etch.dom.header({className: 'header'},
+ etch.dom.span({ref: 'descriptionLabel', className: 'header-item description'},
'Find in Current Buffer'
),
- $.span({className: 'header-item options-label pull-right'},
- $.span({}, 'Finding with Options: '),
- $.span({ref: 'optionsLabel', className: 'options'}),
- $.span({className: 'btn-group btn-toggle btn-group-options'},
- $.button({ref: 'regexOptionButton', className: 'btn'},
- $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-regex" />'})
+ etch.dom.span({className: 'header-item options-label pull-right'},
+ etch.dom.span({}, 'Finding with Options: '),
+ etch.dom.span({ref: 'optionsLabel', className: 'options'}),
+ etch.dom.span({className: 'btn-group btn-toggle btn-group-options'},
+ etch.dom.button({ref: 'regexOptionButton', className: 'btn'},
+ etch.dom.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-regex" />'})
),
- $.button({ref: 'caseOptionButton', className: 'btn'},
- $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-case" />'})
+ etch.dom.button({ref: 'caseOptionButton', className: 'btn'},
+ etch.dom.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-case" />'})
),
- $.button({ref: 'selectionOptionButton', className: 'btn option-selection'},
- $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-selection" />'})
+ etch.dom.button({ref: 'selectionOptionButton', className: 'btn option-selection'},
+ etch.dom.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-selection" />'})
),
- $.button({ref: 'wholeWordOptionButton', className: 'btn option-whole-word'},
- $.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-word" />'})
+ etch.dom.button({ref: 'wholeWordOptionButton', className: 'btn option-whole-word'},
+ etch.dom.svg({className: "icon", innerHTML: '<use href="#find-and-replace-icon-word" />'})
)
)
)
),
- $.section({className: 'input-block find-container'},
- $.div({className: 'input-block-item input-block-item--flex editor-container'},
- $(TextEditor, {
+ etch.dom.section({className: 'input-block find-container'},
+ etch.dom.div({className: 'input-block-item input-block-item--flex editor-container'},
+ etch.dom(TextEditor, {
ref: 'findEditor',
mini: true,
placeholderText: 'Find in current buffer',
buffer: this.findBuffer
}),
- $.div({className: 'find-meta-container'},
- $.span({ref: 'resultCounter', className: 'text-subtle result-counter'})
+ etch.dom.div({className: 'find-meta-container'},
+ etch.dom.span({ref: 'resultCounter', className: 'text-subtle result-counter'})
)
),
- $.div({className: 'input-block-item'},
- $.div({className: 'btn-group btn-group-find'},
- $.button({ref: 'nextButton', className: 'btn btn-next'}, 'Find')
+ etch.dom.div({className: 'input-block-item'},
+ etch.dom.div({className: 'btn-group btn-group-find'},
+ etch.dom.button({ref: 'nextButton', className: 'btn btn-next'}, 'Find')
),
- $.div({className: 'btn-group btn-group-find-all'},
- $.button({ref: 'findAllButton', className: 'btn btn-all'}, 'Find All')
+ etch.dom.div({className: 'btn-group btn-group-find-all'},
+ etch.dom.button({ref: 'findAllButton', className: 'btn btn-all'}, 'Find All')
)
)
),
- $.section({className: 'input-block replace-container'},
- $.div({className: 'input-block-item input-block-item--flex editor-container'},
- $(TextEditor, {
+ etch.dom.section({className: 'input-block replace-container'},
+ etch.dom.div({className: 'input-block-item input-block-item--flex editor-container'},
+ etch.dom(TextEditor, {
ref: 'replaceEditor',
mini: true,
placeholderText: 'Replace in current buffer',
@@ -94,18 +92,18 @@ class FindView {
})
),
- $.div({className: 'input-block-item'},
- $.div({className: 'btn-group btn-group-replace'},
- $.button({ref: 'replaceNextButton', className: 'btn btn-next'}, 'Replace')
+ etch.dom.div({className: 'input-block-item'},
+ etch.dom.div({className: 'btn-group btn-group-replace'},
+ etch.dom.button({ref: 'replaceNextButton', className: 'btn btn-next'}, 'Replace')
),
- $.div({className: 'btn-group btn-group-replace-all'},
- $.button({ref: 'replaceAllButton', className: 'btn btn-all'}, 'Replace All')
+ etch.dom.div({className: 'btn-group btn-group-replace-all'},
+ etch.dom.button({ref: 'replaceAllButton', className: 'btn btn-all'}, 'Replace All')
)
)
),
- $.svg({style: 'display: none;', innerHTML: `
+ etch.dom.svg({style: 'display: none;', innerHTML: `
<symbol id="find-and-replace-icon-regex" viewBox="0 0 20 16" stroke="none" fill-rule="evenodd">
<rect x="3" y="10" width="3" height="3" rx="1"></rect>
<rect x="12" y="3" width="2" height="9" rx="1"></rect>

MODIFY
lib/project-find-view.js
lib/project-find-view.js
@@ -2,7 +2,6 @@ const fs = require('fs-plus');
const path = require('path');
const _ = require('underscore-plus');
const { TextEditor, Disposable, CompositeDisposable } = require('atom');
-const $ = require('./dom-helpers');
const etch = require('etch');
const Util = require('./project/util');
const ResultsModel = require('./project/results-model');
@@ -38,66 +37,66 @@ class ProjectFindView {
render() {
return (
- $.div({tabIndex: -1, className: 'project-find padded'},
- $.header({className: 'header'},
- $.span({ref: 'descriptionLabel', className: 'header-item description'}),
- $.span({className: 'header-item options-label pull-right'},
- $.span({}, 'Finding with Options: '),
- $.span({ref: 'optionsLabel', className: 'options'}),
- $.span({className: 'btn-group btn-toggle btn-group-options'},
- $.button({ref: 'regexOptionButton', className: 'btn option-regex'},
- $.svg({className: "icon", innerHTML: `<use xlink:href="#find-and-replace-icon-regex" />`})
+ etch.dom.div({tabIndex: -1, className: 'project-find padded'},
+ etch.dom.header({className: 'header'},
+ etch.dom.span({ref: 'descriptionLabel', className: 'header-item description'}),
+ etch.dom.span({className: 'header-item options-label pull-right'},
+ etch.dom.span({}, 'Finding with Options: '),
+ etch.dom.span({ref: 'optionsLabel', className: 'options'}),
+ etch.dom.span({className: 'btn-group btn-toggle btn-group-options'},
+ etch.dom.button({ref: 'regexOptionButton', className: 'btn option-regex'},
+ etch.dom.svg({className: "icon", innerHTML: `<use xlink:href="#find-and-replace-icon-regex" />`})
),
- $.button({ref: 'caseOptionButton', className: 'btn option-case-sensitive'},
- $.svg({className: "icon", innerHTML: `<use xlink:href="#find-and-replace-icon-case" />`})
+ etch.dom.button({ref: 'caseOptionButton', className: 'btn option-case-sensitive'},
+ etch.dom.svg({className: "icon", innerHTML: `<use xlink:href="#find-and-replace-icon-case" />`})
),
- $.button({ref: 'wholeWordOptionButton', className: 'btn option-whole-word'},
- $.svg({className: "icon", innerHTML:`<use xlink:href="#find-and-replace-icon-word" />`})
+ etch.dom.button({ref: 'wholeWordOptionButton', className: 'btn option-whole-word'},
+ etch.dom.svg({className: "icon", innerHTML:`<use xlink:href="#find-and-replace-icon-word" />`})
)
)
)
),
- $.section({ref: 'replacmentInfoBlock', className: 'input-block'},
- $.progress({ref: 'replacementProgress', className: 'inline-block'}),
- $.span({ref: 'replacmentInfo', className: 'inline-block'}, 'Replaced 2 files of 10 files')
+ etch.dom.section({ref: 'replacmentInfoBlock', className: 'input-block'},
+ etch.dom.progress({ref: 'replacementProgress', className: 'inline-block'}),
+ etch.dom.span({ref: 'replacmentInfo', className: 'inline-block'}, 'Replaced 2 files of 10 files')
),
- $.section({className: 'input-block find-container'},
- $.div({className: 'input-block-item input-block-item--flex editor-container'},
- $(TextEditor, {
+ etch.dom.section({className: 'input-block find-container'},
+ etch.dom.div({className: 'input-block-item input-block-item--flex editor-container'},
+ etch.dom(TextEditor, {
ref: 'findEditor',
mini: true,
placeholderText: 'Find in project',
buffer: this.findBuffer
})
),
- $.div({className: 'input-block-item'},
- $.div({className: 'btn-group btn-group-find'},
- $.button({ref: 'findAllButton', className: 'btn'}, 'Find All')
+ etch.dom.div({className: 'input-block-item'},
+ etch.dom.div({className: 'btn-group btn-group-find'},
+ etch.dom.button({ref: 'findAllButton', className: 'btn'}, 'Find All')
)
)
),
- $.section({className: 'input-block replace-container'},
- $.div({className: 'input-block-item input-block-item--flex editor-container'},
- $(TextEditor, {
+ etch.dom.section({className: 'input-block replace-container'},
+ etch.dom.div({className: 'input-block-item input-block-item--flex editor-container'},
+ etch.dom(TextEditor, {
ref: 'replaceEditor',
mini: true,
placeholderText: 'Replace in project',
buffer: this.replaceBuffer
})
),
- $.div({className: 'input-block-item'},
- $.div({className: 'btn-group btn-group-replace-all'},
- $.button({ref: 'replaceAllButton', className: 'btn disabled'}, 'Replace All')
+ etch.dom.div({className: 'input-block-item'},
+ etch.dom.div({className: 'btn-group btn-group-replace-all'},
+ etch.dom.button({ref: 'replaceAllButton', className: 'btn disabled'}, 'Replace All')
)
)
),
- $.section({className: 'input-block paths-container'},
- $.div({className: 'input-block-item editor-container'},
- $(TextEditor, {
+ etch.dom.section({className: 'input-block paths-container'},
+ etch.dom.div({className: 'input-block-item editor-container'},
+ etch.dom(TextEditor, {
ref: 'pathsEditor',
mini: true,
placeholderText: 'File/directory pattern. eg. `src` to search in the "src" directory or `*.js` to search all javascript files.',

MODIFY
lib/project/list-view.js
lib/project/list-view.js
const etch = require('etch');
-const $ = require('../dom-helpers');
const resizeDetector = require('element-resize-detector')({strategy: 'scroll'});
module.exports = class ListView {
@@ -52,7 +51,7 @@ module.exports = class ListView {
const item = this.items[i];
const itemHeight = this.heightForItem(this.items[i], i);
children.push(
- $.div(
+ etch.dom.div(
{
style: {
position: 'absolute',
@@ -62,7 +61,7 @@ module.exports = class ListView {
},
key: i
},
- $(this.itemComponent, {
+ etch.dom(this.itemComponent, {
item: item,
top: Math.max(0, scrollTop - itemTopPosition),
bottom: Math.min(itemHeight, scrollBottom - itemTopPosition)
@@ -82,7 +81,7 @@ module.exports = class ListView {
}
}
- return $.div(
+ return etch.dom.div(
{
style: {
position: 'relative',
@@ -90,7 +89,7 @@ module.exports = class ListView {
overflow: 'auto',
}
},
- $.ol(
+ etch.dom.ol(
{
ref: 'list',
className: this.className,

MODIFY
lib/project/match-view.js
lib/project/match-view.js
const { Range, CompositeDisposable } = require('atom');
const etch = require('etch')
const {showIf} = require('./util')
-const $ = require('../dom-helpers')
module.exports =
class MatchView {
@@ -47,26 +46,26 @@ class MatchView {
}
return (
- $.li(
+ etch.dom.li(
{
key: range.toString(),
dataset: {range: range.toString()},
className: `search-result list-item ${this.isSelected ? 'selected' : ''}`
},
- $.span({className: 'line-number text-subtle'},
+ etch.dom.span({className: 'line-number text-subtle'},
range.start.row + 1
),
- $.span({className: 'preview', style: this.previewStyle},
- $.span({}, prefix),
- $.span({className: `match ${replacementText ? 'highlight-error' : 'highlight-info'}`},
+ etch.dom.span({className: 'preview', style: this.previewStyle},
+ etch.dom.span({}, prefix),
+ etch.dom.span({className: `match ${replacementText ? 'highlight-error' : 'highlight-info'}`},
this.match.matchText
),
- $.span({className: 'replacement highlight-success', style: showIf(replacementText)},
+ etch.dom.span({className: 'replacement highlight-success', style: showIf(replacementText)},
replacementText
),
- $.span({}, suffix)
+ etch.dom.span({}, suffix)
)
)
);

MODIFY
lib/project/result-view.js
lib/project/result-view.js
@@ -2,7 +2,6 @@ const FileIcons = require('../file-icons');
const MatchView = require('./match-view');
const path = require('path');
const etch = require('etch');
-const $ = require('../dom-helpers');
module.exports =
class ResultView {
@@ -79,7 +78,7 @@ class ResultView {
}
return (
- $.li(
+ etch.dom.li(
{
key: this.filePath,
dataset: {path: this.filePath},
@@ -91,16 +90,16 @@ class ResultView {
].join(' ').trim()
},
- $.div({ref: 'pathDetails', className: 'path-details list-item'},
- $.span({className: 'disclosure-arrow'}),
- $.span({
+ etch.dom.div({ref: 'pathDetails', className: 'path-details list-item'},
+ etch.dom.span({className: 'disclosure-arrow'}),
+ etch.dom.span({
className: iconClass.join(' ') + ' icon',
dataset: {name: path.basename(this.filePath)}
}),
- $.span({className: 'path-name bright'},
+ etch.dom.span({className: 'path-name bright'},
relativePath
),
- $.span({ref: 'description', className: 'path-match-number'},
+ etch.dom.span({ref: 'description', className: 'path-match-number'},
`(${this.matches.length} matches)`
)
),
@@ -124,7 +123,7 @@ class ResultView {
for (; i < this.matches.length; i++) {
const match = this.matches[i];
children.push(
- $.div(
+ etch.dom.div(
{
style: {
position: 'absolute',
@@ -134,7 +133,7 @@ class ResultView {
},
key: i
},
- $(MatchView, {
+ etch.dom(MatchView, {
match,
regex: this.regex,
replacePattern: this.replacePattern,
@@ -148,7 +147,7 @@ class ResultView {
if (itemTopPosition >= this.bottom) break;
}
- return $.ol(
+ return etch.dom.ol(
{
ref: 'list',
className: 'matches list-tree',

MODIFY
lib/project/results-pane.js
lib/project/results-pane.js
@@ -3,7 +3,6 @@ const {CompositeDisposable} = require('atom');
const ResultsView = require('./results-view');
const {showIf, getSearchResultsMessage, escapeHtml} = require('./util');
const etch = require('etch');
-const $ = require('../dom-helpers');
module.exports =
class ResultsPaneView {
@@ -52,50 +51,50 @@ class ResultsPaneView {
const matchCount = this.searchResults && this.searchResults.matchCount;
return (
- $.div(
+ etch.dom.div(
{
tabIndex: -1,
className: `preview-pane pane-item ${matchCount === 0 ? 'no-results' : ''}`,
},
- $.div({className: 'preview-header'},
- $.span({
+ etch.dom.div({className: 'preview-header'},
+ etch.dom.span({
ref: 'previewCount',
className: 'preview-count inline-block',
innerHTML: this.isLoading ? 'Searching...' : getSearchResultsMessage(this.searchResults)
}),
- $.div(
+ etch.dom.div(
{
ref: 'previewControls',
className: 'preview-controls',
style: showIf(matchCount > 0)
},
- $.div({className: 'btn-group'},
- $.button({ref: 'collapseAll', className: 'btn'}, 'Collapse All'),
- $.button({ref: 'expandAll', className: 'btn'}, 'Expand All')
+ etch.dom.div({className: 'btn-group'},
+ etch.dom.button({ref: 'collapseAll', className: 'btn'}, 'Collapse All'),
+ etch.dom.button({ref: 'expandAll', className: 'btn'}, 'Expand All')
)
),
- $.div({className: 'inline-block', style: showIf(this.isLoading)},
- $.div({className: 'loading loading-spinner-tiny inline-block'}),
+ etch.dom.div({className: 'inline-block', style: showIf(this.isLoading)},
+ etch.dom.div({className: 'loading loading-spinner-tiny inline-block'}),
- $.div(
+ etch.dom.div(
{
className: 'inline-block',
style: showIf(this.isLoading && this.searchingIsSlow)
},
- $.span({ref: 'searchedCount', className: 'searched-count'},
+ etch.dom.span({ref: 'searchedCount', className: 'searched-count'},
this.numberOfPathsSearched.toString()
),
- $.span({}, ' paths searched')
+ etch.dom.span({}, ' paths searched')
)
)
),
- $.ul(
+ etch.dom.ul(
{
ref: 'errorList',
className: 'error-list list-group padded',
@@ -103,18 +102,18 @@ class ResultsPaneView {
},
...this.searchErrors.map(message =>
- $.li({className: 'text-error'}, escapeHtml(message))
+ etch.dom.li({className: 'text-error'}, escapeHtml(message))
)
),
- $(ResultsView, {ref: 'resultsView', model: this.model}),
+ etch.dom(ResultsView, {ref: 'resultsView', model: this.model}),
- $.ul(
+ etch.dom.ul(
{
className: 'centered background-message no-results-overlay',
style: showIf(matchCount === 0)
},
- $.li({}, 'No Results')
+ etch.dom.li({}, 'No Results')
)
)
);

MODIFY
lib/project/results-view.js
lib/project/results-view.js
@@ -2,7 +2,6 @@ const {Range, CompositeDisposable, Disposable} = require('atom');
const ResultView = require('./result-view');
const ListView = require('./list-view');
const etch = require('etch');
-const $ = require('../dom-helpers');
const resizeDetector = require('element-resize-detector')({strategy: 'scroll'});
const reverseDirections = {
@@ -69,15 +68,15 @@ class ResultsView {
replacePattern = this.model.getFindOptions().replacePattern;
}
- return $.div(
+ return etch.dom.div(
{className: 'results-view focusable-panel', tabIndex: '-1'},
- $.ol(
+ etch.dom.ol(
{
className: 'list-tree has-collapsable-children',
style: {visibility: 'hidden', position: 'absolute'}
},
- $(ResultView, {
+ etch.dom(ResultView, {
ref: 'dummyResultView',
top: 0,
bottom: Infinity,
@@ -100,7 +99,7 @@ class ResultsView {
),
this.pathDetailsHeight != null ?
- $(ListView, {
+ etch.dom(ListView, {
ref: 'listView',
className: 'list-tree has-collapsable-children',
itemComponent: ResultView,
@@ -119,7 +118,7 @@ class ResultsView {
}, this.model.results[filePath]);
}),
}) :
- $.div()
+ etch.dom.div()
);
}

Replace `lib/dom-helpers.js` with `etch.dom`