Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(package): use Babel 7 #2750

Merged
merged 4 commits into from
May 1, 2018
Merged

chore(package): use Babel 7 #2750

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
13cd286
chore(package): use Babel 7
layershifter Apr 30, 2018
f8a01f0
Merge branch 'master' of /~https://github.com/Semantic-Org/Semantic-UI-…
layershifter May 1, 2018
4f40d21
chore(package): update yarn.lock and limit line size
layershifter May 1, 2018
e4c55a2
chore(package): use preset-env for transforms in docs
layershifter May 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
{
"presets": [
"./build/preset-env",
"react",
"stage-1"
"@babel/react",
["@babel/stage-1", { "decoratorsLegacy": true }]
],
"plugins": [
"lodash",
"transform-react-handled-props",
["transform-react-remove-prop-types", {
"mode": "wrap"
}],
["transform-runtime", {
["@babel/transform-runtime", {
"polyfill": false,
"regenerator": false
}]
],
"env": {
"development": {
"plugins": "react-hot-loader/babel"
"plugins": [
"react-hot-loader/babel"
]
},
"test": {
"plugins": [
Expand Down
45 changes: 0 additions & 45 deletions browser/index.html
View file
Open in desktop

This file was deleted.

28 changes: 17 additions & 11 deletions build/preset-env.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
const env = process.env.NODE_ENV

const plugins = env === 'build' || env === 'build-es' ? [
['filter-imports', {
imports: {
debug: ['default'],
'../../lib': ['makeDebugger'],
},
}],
] : []
const plugins =
env === 'build' || env === 'build-es'
? [
[
'filter-imports',
{
imports: {
debug: ['default'],
'../../lib': ['makeDebugger'],
},
},
],
]
: []
const browsers = [
'last 8 versions',
'safari > 8',
Expand All @@ -23,7 +29,7 @@ const envOptions = {
}
if (env === 'build-es') envOptions.modules = false

module.exports = {
presets: [['env', envOptions]],
module.exports = () => ({
presets: [['@babel/env', envOptions]],
plugins,
}
})
34 changes: 17 additions & 17 deletions config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,25 +66,25 @@ const config = {
compiler_output_path: paths.base(envConfig.dir_docs_dist),
compiler_public_path: '/',
compiler_stats: {
hash: false, // the hash of the compilation
version: false, // webpack version info
timings: true, // timing info
assets: true, // assets info
chunks: false, // chunk info
colors: true, // with console colors
chunkModules: false, // built modules info to chunk info
modules: false, // built modules info
cached: false, // also info about cached (not built) modules
reasons: false, // info about the reasons modules are included
source: false, // the source code of modules
errorDetails: true, // details to errors (like resolving log)
chunkOrigins: false, // the origins of chunks and chunk merging info
modulesSort: '', // (string) sort the modules by that field
chunksSort: '', // (string) sort the chunks by that field
assetsSort: '', // (string) sort the assets by that field
hash: false, // the hash of the compilation
version: false, // webpack version info
timings: true, // timing info
assets: true, // assets info
chunks: false, // chunk info
colors: true, // with console colors
chunkModules: false, // built modules info to chunk info
modules: false, // built modules info
cached: false, // also info about cached (not built) modules
reasons: false, // info about the reasons modules are included
source: false, // the source code of modules
errorDetails: true, // details to errors (like resolving log)
chunkOrigins: false, // the origins of chunks and chunk merging info
modulesSort: '', // (string) sort the modules by that field
chunksSort: '', // (string) sort the chunks by that field
assetsSort: '', // (string) sort the assets by that field
},
compiler_vendor: [
'babel-standalone',
'@babel/standalone',
'brace',
'brace/ext/language_tools',
'brace/mode/jsx',
Expand Down
125 changes: 56 additions & 69 deletions docs/app/Components/ComponentDoc/ComponentExample/ComponentExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import * as Babel from 'babel-standalone'
import * as Babel from '@babel/standalone'
import _ from 'lodash'
import PropTypes from 'prop-types'
import React, { Component, createElement, isValidElement } from 'react'
Expand All @@ -15,7 +15,7 @@ import ComponentControls from '../ComponentControls'
import ComponentExampleTitle from './ComponentExampleTitle'

const babelConfig = {
presets: ['es2015', 'react', 'stage-1'],
presets: ['es2015', 'react', ['stage-1', { decoratorsLegacy: true }]],
Copy link
Member

@levithomason levithomason Apr 30, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use babel-preset-env in the browser too?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep 😄

}

const headerColumnStyle = {
Expand Down Expand Up @@ -103,12 +103,16 @@ class ComponentExample extends Component {
copyToClipboard(location.href)
}

handleMouseMove = _.throttle(() => {
const { controlsVisible } = this.state
if (controlsVisible) return
handleMouseMove = _.throttle(
() => {
const { controlsVisible } = this.state
if (controlsVisible) return

this.setState({ controlsVisible: true })
}, 200, { trailing: false })
this.setState({ controlsVisible: true })
},
200,
{ trailing: false },
)

handleMouseLeave = () => this.setState({ controlsVisible: false })

Expand Down Expand Up @@ -149,7 +153,8 @@ class ComponentExample extends Component {
resetJSX = () => {
const { sourceCode } = this.state
const original = this.getOriginalSourceCode()
if (sourceCode !== original && confirm('Lose your changes?')) { // eslint-disable-line no-alert
if (sourceCode !== original && confirm('Lose your changes?')) {
// eslint-disable-line no-alert
this.setState({ sourceCode: original })
this.renderSourceCode()
}
Expand Down Expand Up @@ -201,21 +206,23 @@ class ComponentExample extends Component {

// rewrite imports to const statements against the UPPERCASE module names
const imports = _.get(/(^[\s\S])*import[\s\S]*from[\s\S]*['"]\n/.exec(sourceCode), '[0]', '')
.replace(/[\s\n]+/g, ' ') // normalize spaces and make one line
.replace(/ import/g, '\nimport') // one import per line
.split('\n') // split lines
.filter(Boolean) // remove empty lines
.map((l) => { // rewrite imports to const statements
const [
defaultImport,
destructuredImports,
_module,
] = _.tail(/import\s+([\w]+)?(?:\s*,\s*)?({[\s\w,]+})?\s+from\s+['"](?:.*\/)?([\w\-_]+)['"]/.exec(l))
.replace(/[\s\n]+/g, ' ') // normalize spaces and make one line
.replace(/ import/g, '\nimport') // one import per line
.split('\n') // split lines
.filter(Boolean) // remove empty lines
.map((l) => {
// rewrite imports to const statements
const [defaultImport, destructuredImports, _module] = _.tail(
/import\s+([\w]+)?(?:\s*,\s*)?({[\s\w,]+})?\s+from\s+['"](?:.*\/)?([\w\-_]+)['"]/.exec(l),
)

const module = _.snakeCase(_module).toUpperCase()

if (module === 'COMMON') {
const componentPath = examplePath.split(__PATH_SEP__).splice(0, 2).join(__PATH_SEP__)
const componentPath = examplePath
.split(__PATH_SEP__)
.splice(0, 2)
.join(__PATH_SEP__)
COMMON = require(`docs/app/Examples/${componentPath}/common`)
} else if (module === 'WIREFRAME') {
WIREFRAME = require('docs/app/Examples/behaviors/Visibility/Wireframe').default
Expand All @@ -234,8 +241,8 @@ class ComponentExample extends Component {
const defaultExport = _.get(/export\s+default\s+(?:class|function)?(?:\s+)?(\w+)/.exec(sourceCode), '[1]')

const body = _.get(/(export\sdefault\sclass|const|class\s\S*\sextends)[\s\S]*/.exec(sourceCode), '[0]', '')
.replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements
.replace(/export\s+default\s+/, '') // remove `export default ...`
.replace(/export\s+default\s+(?!class|function)\w+([\s\n]+)?/, '') // remove `export default Foo` statements
.replace(/export\s+default\s+/, '') // remove `export default ...`

const IIFE = `(function() {\n${imports}${body}return ${defaultExport}\n}())`

Expand Down Expand Up @@ -285,24 +292,27 @@ class ComponentExample extends Component {

this.ghBugHref = [
`${repoURL}/issues/new?`,
_.map({
title: `fix(${componentName}): your description`,
body: [
'**Steps to Reproduce**',
'1. Do something',
'2. Do something else.',
'',
'**Expected**',
`The ${componentName} should do this`,
'',
'**Result**',
`The ${componentName} does not do this`,
'',
'**Testcase**',
`If the docs show the issue, use: ${location.href}`,
'Otherwise, fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX',
].join('\n'),
}, (val, key) => `${key}=${encodeURIComponent(val)}`).join('&'),
_.map(
{
title: `fix(${componentName}): your description`,
body: [
'**Steps to Reproduce**',
'1. Do something',
'2. Do something else.',
'',
'**Expected**',
`The ${componentName} should do this`,
'',
'**Result**',
`The ${componentName} does not do this`,
'',
'**Testcase**',
`If the docs show the issue, use: ${location.href}`,
'Otherwise, fork this to get started: http://codepen.io/levithomason/pen/ZpBaJX',
].join('\n'),
},
(val, key) => `${key}=${encodeURIComponent(val)}`,
).join('&'),
].join('')
}

Expand Down Expand Up @@ -362,14 +372,8 @@ class ComponentExample extends Component {
return (
<div style={style}>
{this.renderJSXControls()}
<Editor
id={`${this.getKebabExamplePath()}-jsx`}
value={sourceCode}
onChange={this.handleChangeCode}
/>
{error && (
<pre style={errorStyle}>{error}</pre>
)}
<Editor id={`${this.getKebabExamplePath()}-jsx`} value={sourceCode} onChange={this.handleChangeCode} />
{error && <pre style={errorStyle}>{error}</pre>}
</div>
)
}
Expand All @@ -380,8 +384,7 @@ class ComponentExample extends Component {

// add new lines between almost all adjacent elements
// moves inline elements to their own line
const preFormattedHTML = markup
.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')
const preFormattedHTML = markup.replace(/><(?!\/i|\/label|\/span|option)/g, '>\n<')

const beautifiedHTML = html(preFormattedHTML, {
indent_size: 2,
Expand Down Expand Up @@ -409,11 +412,7 @@ class ComponentExample extends Component {
}

return (
<Visibility
once={false}
onTopPassed={this.handlePass}
onTopPassedReverse={this.handlePass}
>
<Visibility once={false} onTopPassed={this.handlePass} onTopPassedReverse={this.handlePass}>
<Grid
className='docs-example'
id={this.anchorName}
Expand All @@ -423,11 +422,7 @@ class ComponentExample extends Component {
>
<Grid.Row>
<Grid.Column style={headerColumnStyle} width={12}>
<ComponentExampleTitle
description={description}
title={title}
suiVersion={suiVersion}
/>
<ComponentExampleTitle description={description} title={title} suiVersion={suiVersion} />
</Grid.Column>
<Grid.Column textAlign='right' width={4}>
<ComponentControls
Expand All @@ -442,18 +437,10 @@ class ComponentExample extends Component {
</Grid.Column>
</Grid.Row>

<Grid.Row columns={1}>
{children && (
<Grid.Column style={childrenStyle}>
{children}
</Grid.Column>
)}
</Grid.Row>
<Grid.Row columns={1}>{children && <Grid.Column style={childrenStyle}>{children}</Grid.Column>}</Grid.Row>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps we should shorten our line length. This is quite hard to read.

<Grid.Row columns={1}>{children && <Grid.Column style={childrenStyle}>{children}</Grid.Column>}</Grid.Row>

This line is 118 columns, maybe go with 100 columns?

<Grid.Row columns={1}>
  {children && <Grid.Column style={childrenStyle}>{children}</Grid.Column>}
</Grid.Row>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed


<Grid.Row columns={1}>
<Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>
{exampleElement}
</Grid.Column>
<Grid.Column className={`rendered-example ${this.getKebabExamplePath()}`}>{exampleElement}</Grid.Column>
<Grid.Column>
{this.renderJSX()}
{this.renderHTML()}
Expand Down
5 changes: 1 addition & 4 deletions docs/app/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,7 @@
}())
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
<script
src="//cdnjs.cloudflare.com/ajax/libs/babel-standalone/<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"
data-presets="es2015,react,stage1"
></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@<%= htmlWebpackPlugin.options.versions.babel %>/babel.min.js"></script>
<script src="//cdn.jsdelivr.net/faker.js/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/<%= htmlWebpackPlugin.options.versions.jsBeautify %>/beautify-html.min.js"></script>
<!-- Use unminified React when not in production so we get errors and warnings -->
Expand Down
Loading