Don't use babel in ProjectFindView
MODIFY
lib/dom-helpers.js
lib/dom-helpers.js
@@ -8,7 +8,7 @@ const tagNames = `
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
+ input keygen link meta param source track wbr svg
`.split(/\s+/);
function dom() {

MODIFY
lib/project-find-view.js
lib/project-find-view.js
-/** @babel */
-/** @jsx etch.dom */
-
const fs = require('fs-plus');
const path = require('path');
const _ = require('underscore-plus');
const { TextEditor, Disposable, CompositeDisposable } = require('atom');
-const { $, $$$, View, TextEditorView } = require('atom-space-pen-views');
-
-const etch = require('etch')
+const $ = require('./dom-helpers');
+const etch = require('etch');
const Util = require('./project/util');
const ResultsModel = require('./project/results-model');
const ResultsPaneView = require('./project/results-pane');
@@ -42,71 +38,74 @@ 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>
- <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" />`} />
- </button>
- <button ref='caseOptionButton' className='btn option-case-sensitive'>
- <svg className="icon" innerHTML={`<use xlink:href="#find-and-replace-icon-case" />`} />
- </button>
- <button ref='wholeWordOptionButton' className='btn option-whole-word'>
- <svg className="icon" innerHTML={`<use xlink:href="#find-and-replace-icon-word" />`} />
- </button>
- </span>
- </span>
- </header>
-
- <section ref='replacmentInfoBlock' className='input-block'>
- <progress ref='replacementProgress' className='inline-block' />
- <span ref='replacmentInfo' className='inline-block'>Replaced 2 files of 10 files</span>
- </section>
-
- <section className='input-block find-container'>
- <div className='input-block-item input-block-item--flex editor-container'>
- <TextEditor
- ref='findEditor'
- mini
- placeholderText='Find in project'
- buffer={this.findBuffer} />
- </div>
- <div className='input-block-item'>
- <div className='btn-group btn-group-find'>
- <button ref='findAllButton' className='btn'>Find All</button>
- </div>
- </div>
- </section>
-
- <section className='input-block replace-container'>
- <div className='input-block-item input-block-item--flex editor-container'>
- <TextEditor
- ref='replaceEditor'
- mini
- placeholderText='Replace in project'
- buffer={this.replaceBuffer} />
- </div>
- <div className='input-block-item'>
- <div className='btn-group btn-group-replace-all'>
- <button ref='replaceAllButton' className='btn disabled'>Replace All</button>
- </div>
- </div>
- </section>
-
- <section className='input-block paths-container'>
- <div className='input-block-item editor-container'>
- <TextEditor
- ref='pathsEditor'
- mini
- placeholderText='File/directory pattern. eg. `src` to search in the "src" directory or `*.js` to search all javascript files.'
- buffer={this.pathsBuffer} />
- </div>
- </section>
- </div>
+ $.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" />`})
+ ),
+ $.button({ref: 'caseOptionButton', className: 'btn option-case-sensitive'},
+ $.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" />`})
+ )
+ )
+ )
+ ),
+
+ $.section({ref: 'replacmentInfoBlock', className: 'input-block'},
+ $.progress({ref: 'replacementProgress', className: 'inline-block'}),
+ $.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, {
+ 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')
+ )
+ )
+ ),
+
+ $.section({className: 'input-block replace-container'},
+ $.div({className: 'input-block-item input-block-item--flex editor-container'},
+ $(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')
+ )
+ )
+ ),
+
+ $.section({className: 'input-block paths-container'},
+ $.div({className: 'input-block-item editor-container'},
+ $(TextEditor, {
+ ref: 'pathsEditor',
+ mini: true,
+ placeholderText: 'File/directory pattern. eg. `src` to search in the "src" directory or `*.js` to search all javascript files.',
+ buffer: this.pathsBuffer
+ })
+ )
+ )
+ )
);
}

Don't use babel in ProjectFindView