Update nodejs version

.bin/bundle

@@ -19,8 +19,7 @@ NODE_ENV=development $BIN/browserify --verbose --debug \
   --require ./blocks/index.js:panels/blocks \
   --require ./utils/normalise-uri/index.js:panels/normalise-uri \
   --require ./utils/snap.js:panels/snap \
-  --transform [rollupify --config rollup.config.js] \
-  --transform loose-envify \
+  --transform [ babelify ] \
   --entry index.dev.js | \
   $BIN/exorcist $PANELS.js.map > $PANELS.js
 
@@ -33,16 +32,10 @@ NODE_ENV=production $BIN/browserify --verbose --debug \
   --require ./blocks/index.js:panels/blocks \
   --require ./utils/normalise-uri/index.js:panels/normalise-uri \
   --require ./utils/snap.js:panels/snap \
-  --transform [rollupify --config rollup.config.js] \
-  --transform loose-envify \
+  --transform [ babelify ] \
   --entry index.js | \
   $BIN/exorcist $PANELS-prod.js.map > $PANELS-prod.js &&
-  $BIN/uglifyjs --verbose \
-    --compress \
-    --mangle \
-    --screw-ie8 \
-    --in-source-map $PANELS-prod.js.map \
-    --source-map $PANELS.min.js.map $PANELS-prod.js > $PANELS.min.js
+  $BIN/uglifyjs $PANELS-prod.js -o $PANELS.min.js -c -m --source-map "content='$PANELS-prod.js.map'"
 
 ls -lha $PANELS.*
-echo "[bundle] done"
+echo "[bundle] done"

.bin/bundle-dev

@@ -18,7 +18,6 @@ NODE_ENV=development $BIN/watchify --verbose --debug \
   --require ./blocks/index.js:panels/blocks \
   --require ./utils/normalise-uri/index.js:panels/normalise-uri \
   --require ./utils/snap.js:panels/snap \
-  --transform [rollupify --config rollup.config.js] \
-  --transform loose-envify \
+  --transform [ babelify ] \
   --entry index.dev.js \
   --outfile $PANELS.js

.bin/start

@@ -11,17 +11,16 @@ function run {
     --external react \
     --external react-dom \
     --external velocity-react \
-    --transform [rollupify --config rollup.config.js] \
-    --transform loose-envify \
+    --transform [ babelify ] \
     --require ./playground/$1/src.js:$1 \
     --outfile playground/$1/app.js
 }
 
-run trails.panels.localhost & \
-run launchpad.panels.localhost & \
-run launchpad-floating.panels.localhost & \
-run toc.localhost & \
-run notes.localhost & \
+run trails.panels.localhost &
+run launchpad.panels.localhost &
+run launchpad-floating.panels.localhost &
+run toc.localhost &
+run notes.localhost &
 NODE_ENV=development $BIN/watchify --debug --verbose \
   --external panels \
   --external panels/blocks \
@@ -30,8 +29,7 @@ NODE_ENV=development $BIN/watchify --debug --verbose \
   --external react \
   --external react-dom \
   --external velocity-react \
-  --transform [rollupify --config rollup.config.js] \
-  --transform loose-envify \
+  --transform [ babelify ] \
   --require ./playground/custom-parser.panels.localhost/app/src.js:custom-parser.panels.localhost \
   --outfile playground/custom-parser.panels.localhost/app/app.js & \
 NODE_ENV=development $BIN/watchify --debug --verbose \
@@ -41,8 +39,7 @@ NODE_ENV=development $BIN/watchify --debug --verbose \
   --require ./blocks/index.js:panels/blocks \
   --require ./utils/normalise-uri/index.js:panels/normalise-uri \
   --require ./utils/snap.js:panels/snap \
-  --transform [rollupify --config rollup.config.js] \
-  --transform loose-envify \
+  --transform [ babelify ] \
   --outfile playground/panels.js index.dev.js & \
-  sudo $BIN/babel-node --plugins transform-es2015-modules-commonjs .bin/server.js & \
+$BIN/babel-node --plugins @babel/plugin-transform-modules-commonjs .bin/server.js &
   wait

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  parser: '@babel/eslint-parser',
+  env: {
+    browser: true,
+    es6: true,
+  },
+  extends: [
+    'airbnb',
+    'prettier',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+    'plugin:react/recommended',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  plugins: ['react'],
+  rules: {
+    'prettier/prettier': ['error'],
+  },
+};

.gitignore

@@ -6,4 +6,4 @@ bundle
 playground/panels.js
 playground/*/app.js
 playground/*/*/app.js
-*.tmp
+*.tmp

.npmignore

@@ -1,3 +1,2 @@
-.babelrc
-examples/
+babel.config.js
 playground/

.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

README.md

@@ -1,12 +1,27 @@
 # panels by UXtemple
+> A hackable runtime for a modern, composable web.
 
-A hackable runtime for a modern, composable web.
+## Table of Contents
+  - [Setup](#setup)
+  - [Examples](#examples)
+  - [License](#license)
+  - [Contact](#contact)
+## Setup
+1. Clone this repo to your desktop.
+2. Make sure you are using node **v16.15.1**.
+3. Run `yarn` to install all dependencies.
 
-Docs are WIP. See `playground/`'s examples for now.
+## Examples
+See `playground/`'s examples for now. - You can also run `yarn start`.
 
-Depending on your target platform, may want to polyfill `Promise`, `fetch` and `Array.findIndex`.
+- Depending on your target platform, may want to polyfill `Promise`, `fetch` and `Array.findIndex`.
 
-MIT license.
+## License
+>You can check out the full license [here](LICENSE)
+
+This project is licensed under the terms of the **MIT** license.
+
+## Contact
 
 With <3 by UXtemple.
 Like Panels? Get in touch! :)

babel.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  presets: [['@babel/preset-env'], '@babel/preset-react'],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    '@babel/plugin-proposal-export-default-from',
+  ],
+};

blocks/circle.js

@@ -1,4 +1,4 @@
 import React from 'react'
 
 const Circle = props => <circle {...props} />
-export default Circle
+export default Circle

blocks/dangerously-set-inner-html.js

@@ -10,4 +10,4 @@ const DangerouslySetInnerHTML = props => (
     style={props.style}
   />
 )
-export default DangerouslySetInnerHTML
+export default DangerouslySetInnerHTML

blocks/font.js

@@ -45,4 +45,4 @@ export default class Font extends React.Component {
 }
 Font.defaultProps = {
   source: 'google',
-}
+}

blocks/g.js

@@ -5,4 +5,4 @@ const G = ({ children, ...props }) => (
     {children}
   </g>
 )
-export default G
+export default G

blocks/index.js

@@ -1,22 +1,16 @@
-export DangerouslySetInnerHTML from './dangerously-set-inner-html.js'
-export Font from './font.js'
-export Horizontal from './horizontal.js'
-export Image from './image.js'
-export Input from './input.js'
-export Knocking from './knocking.js'
-export List from './list.js'
-export Style from './style.js'
-export Text from './text.js'
-export Textarea from './textarea.js'
-export Vertical from './vertical.js'
-
-export Circle from './circle.js'
-export ClipPath from './clip-path.js'
-export Ellipse from './ellipse.js'
-export G from './g.js'
-export Line from './line.js'
-export Rect from './rect.js'
-export Svg from './svg.js'
-export Path from './path.js'
-export Polygon from './polygon.js'
-export Polyline from './polyline.js'
+export { default as DangerouslySetInnerHTML } from './dangerously-set-inner-html.js'
+export { default as Font } from './font.js'
+export { default as Horizontal } from './horizontal.js'
+export { default as Input } from './input.js'
+export { default as Knocking } from './knocking.js'
+export { default as Style } from './style.js'
+export { default as Text } from './text.js'
+export { default as Textarea } from './textarea.js'
+export { default as Vertical } from './vertical.js'
+export { default as Circle } from './circle.js'
+export { default as G } from './g.js'
+export { default as Line } from './line.js'
+export { default as Rect } from './rect.js'
+export { default as Svg } from './svg.js'
+export { default as Path } from './path.js'
+export { default as Polygon } from './polygon.js'

blocks/input.js

@@ -109,4 +109,4 @@ Input.contextTypes = {
   i18n: PropTypes.shape({
     t: PropTypes.func.isRequired,
   }),
-};
+};

blocks/line.js

@@ -1,4 +1,4 @@
 import React from 'react'
 
 const Line = props => <line {...props} />
-export default Line
+export default Line

blocks/path.js

@@ -1,4 +1,4 @@
 import React from 'react'
 
 const Path = props => <path {...props} />
-export default Path
+export default Path

blocks/polygon.js

@@ -1,4 +1,4 @@
 import React from 'react'
 
 const Polygon = props => <polygon {...props} />
-export default Polygon
+export default Polygon

blocks/rect.js

@@ -1,4 +1,4 @@
 import React from 'react'
 
 const Rect = props => <rect {...props} />
-export default Rect
+export default Rect

blocks/style.js

@@ -5,4 +5,4 @@ const Style = props => (
     {props.css}
   </style>
 )
-export default Style
+export default Style