Upgrade UI to version 0.2.0

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": true
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    ["@babel/plugin-transform-private-methods", { "loose": true }],
+    ["@babel/plugin-transform-private-property-in-object", { "loose": true }]
+  ]
+}

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
     working_directory: ~/github/codepan
     docker:
-      - image: circleci/node:8.0.0
+      - image: cimg/node:lts
     branches:
       ignore:
         - gh-pages # list of branches to ignore
@@ -19,6 +19,3 @@ jobs:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
             - ./node_modules
-      - run:
-          name: test
-          command: yarn test

README.md

@@ -1,9 +1,13 @@
 # CodePan
 
-[![CircleCI](https://circleci.com/gh/egoist/codepan/tree/master.svg?style=shield&circle-token=e811a08d6464123dd65d2dcd52f62806bf9e37fc)](https://circleci.com/gh/egoist/codepan/tree/master) [![chat](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?style=flat)](https://chat.egoist.moe)
+[![CircleCI](https://circleci.com/gh/Prozi/codepan/tree/master.svg?style=shield)](https://circleci.com/gh/Prozi/codepan/tree/master) [![chat](https://img.shields.io/badge/chat-on%20discord-7289DA.svg?style=flat)](https://chat.egoist.moe)
 
 Play with JS/CSS/HTML so simple it hurts, the web playground that works offline.
 
+## Demo
+
+https://code.pietal.dev/
+
 ## Why
 
 > Aren't there already JSBin/CodePen/JSFiddle?
@@ -24,6 +28,25 @@ Clone this repository and install dependencies by running `yarn`, then:
 - `yarn build`: Build in production mode
 - `yarn lint`: Run eslint
 
+## Set pans from the url GET parameters
+
+You can use url GET param:
+
+- `pans=html,css,js,console,output`
+
+Sets types of visible open pans, any number is ok
+
+- `layout=column|row`
+
+Sets the desired layout of open pans
+
+- `headless=false|true`
+
+Doesnt show ads, menu or pan header titles
+
 ## License
 
-MIT © [EGOIST](https://github.com/egoist)
+MIT
+
+v.0.1.x © [EGOIST](https://github.com/egoist)
+v.0.2.x © [PROZI](https://github.com/Prozi)

index.ejs

@@ -69,6 +69,8 @@
         headwayScript.src = 'https://cdn.headwayapp.co/widget.js'
         headwayScript.async = true
         document.body.appendChild(headwayScript)
+        var element = document.querySelector(HW_config.selector)
+        element && (element.style.display = 'inline-block')
       }
     </script>
   </body>

package.json

@@ -1,106 +1,74 @@
 {
-  "private": true,
   "name": "codepan",
   "productName": "CodePan",
   "description": "Play with JS/CSS/HTML so simple it hurts",
   "details": "CodePan is where people prototype front-end apps, you are free to use it offline anytime anywhere.",
   "main": "src/index.js",
   "homepage": "https://codepan.net/",
-  "version": "0.1.0",
-  "repository": {},
+  "version": "0.2.7",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Prozi/codepan"
+  },
+  "bugs": {
+    "url": "https://github.com/Prozi/codepan/issues"
+  },
   "scripts": {
-    "test": "npm run lint",
-    "lint": "xo",
-    "dev": "poi",
-    "build": "poi build",
+    "dev": "poi --serve",
     "deploy": "surge -p dist -d codepan.net",
-    "predeploy": "npm run build && cp dist/index.html dist/200.html",
-    "report": "poi build --bundle-report"
-  },
-  "xo": {
-    "parser": "babel-eslint",
-    "extends": [
-      "rem"
-    ],
-    "envs": [
-      "browser"
-    ],
-    "extensions": [
-      "vue"
-    ],
-    "plugins": [
-      "html"
-    ],
-    "rules": {
-      "no-new": 0,
-      "import/no-unresolved": 0,
-      "import/no-extraneous-dependencies": 0,
-      "import/no-unassigned-import": 0,
-      "no-warning-comments": 0,
-      "import/prefer-default-export": 0,
-      "no-multi-assign": 0,
-      "complexity": 0,
-      "guard-for-in": 0,
-      "unicorn/filename-case": 0,
-      "import/no-webpack-loader-syntax": 0,
-      "unicorn/no-abusive-eslint-disable": 0,
-      "no-case-declarations": 0
-    },
-    "ignores": [
-      "src/boilerplates/**",
-      "src/utils/vue-jsx-merge-props.js",
-      "static/**"
-    ]
+    "clean": "rm -rf dist",
+    "build": "poi --prod",
+    "postbuild": "cp -r static/* dist",
+    "start": "chef-express dist",
+    "format": "prettier --write src",
+    "update": "ncu -u && yarn add babel-loader@^8 @babel/core@^7 codemirror@^5 vuex@^3 stylus-loader@^3 vue-router@^3 vue@^2 svelte@^1 stylus@^0.54.5 parse-package-name@^0 -D"
   },
   "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "babel-plugin-component": "^0.10.0",
-    "babel-preset-babili": "^0.1.4",
-    "buble-loader": "^0.4.1",
-    "eslint-config-rem": "^3.2.0",
-    "eslint-plugin-html": "^3.2.0",
-    "gh-pages": "^1.0.0",
-    "less": "^2.7.3",
-    "offline-plugin": "^4.8.3",
-    "poi": "^9.6.7",
-    "poi-preset-babel-minify": "^1.0.3",
-    "poi-preset-bundle-report": "^2.0.1",
-    "poi-preset-offline": "^9.0.3",
-    "raw-loader": "^0.5.1",
-    "repo-latest-commit": "^1.0.0",
-    "stylus": "^0.54.5",
-    "stylus-loader": "^3.0.1",
-    "surge": "^0.19.0",
-    "webpack-node-modules": "^0.1.1",
-    "xo": "^0.18.2"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@babel/core": "^7.0.0-beta.32",
-    "axios": "^0.16.2",
-    "babel-preset-vue": "^2.0.0",
-    "cm-highlight": "^0.1.1",
-    "codemirror": "^5.28.0",
+    "@babel/core": "^7",
+    "axios": "^1",
+    "babel-loader": "^8",
+    "babel-preset-poi": "^10.0.2",
+    "babel-preset-vue": "^2.0.2",
+    "buble": "^0.20.0",
+    "buble-loader": "^0.5.1",
+    "codemirror": "^5",
     "codemirror-emmet": "^1.0.0",
-    "debounce": "^1.0.2",
-    "element-ui": "^2.0.11",
-    "is-electron": "^2.1.0",
-    "loadjs": "^3.5.1",
-    "marked3": "^0.5.1",
+    "core-js": "^3.38.0",
+    "debounce": "^2",
+    "element-ui": "^2.15.14",
+    "is-electron": "^2.2.2",
+    "less": "^4",
+    "loadjs": "^4",
+    "marked3": "^0.5.2",
     "notie": "^4.3.1",
     "nprogress": "^0.2.0",
     "object-assign": "^4.1.1",
-    "parse-package-name": "^0.1.0",
-    "pify": "^3.0.0",
-    "promise-polyfill": "^6.0.2",
+    "offline-plugin": "^5.0.7",
+    "parse-package-name": "^0",
+    "pify": "^6",
+    "poi": "^12.10.3",
+    "poi-preset-babel-minify": "^1.0.3",
+    "poi-preset-bundle-report": "^2.0.2",
+    "poi-preset-offline": "^9.0.3",
+    "promise-polyfill": "^8.3.0",
+    "raw-loader": "^4.0.2",
     "reqjs": "^1.0.3",
-    "svelte": "^1.30.0",
-    "v-tippy": "^1.0.0",
-    "vue-feather-icons": "^4.5.0",
-    "vue-ga": "^1.0.0",
-    "vue-inline": "^1.0.1",
-    "vue-router": "^2.7.0",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3",
+    "svelte": "^1",
+    "v-tippy": "^2.0.0",
+    "vue": "^2",
+    "vue-feather-icons": "^5.1.0",
+    "vue-ga": "^1.1.0",
+    "vue-router": "^3",
     "vue-slim-modal": "^1.0.4",
-    "vuex": "^2.3.1"
+    "vue-template-compiler": "^2.7.16",
+    "vuex": "^3",
+    "webpack": "^5",
+    "webpack-node-modules": "^0.1.1"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "chef-express": "^2.1.4"
   }
 }

poi.config.js

@@ -1,75 +1,74 @@
-const nodeModules = require('webpack-node-modules')
-const repoLatestCommit = require('repo-latest-commit')
-const pkg = require('./package')
+const { execSync } = require("child_process");
+const nodeModules = require("webpack-node-modules");
+const pkg = require("./package");
+
+const LATEST_COMMIT = (
+  process.env.COMMIT_HASH ||
+  execSync('if [ -d ".git" ]; then git rev-parse HEAD; fi', {
+    encoding: "utf8",
+  })
+).slice(0, 7);
 
 const cdns = {
-  BABEL_CDN: 'https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js',
-  PUG_CDN: 'https://cdn.jsdelivr.net/npm/[email protected]/index.js',
-  CSSNEXT_CDN: 'https://cdn.jsdelivr.net/npm/[email protected]/index.js',
-  POSTCSS_CDN: 'https://cdn.jsdelivr.net/npm/[email protected]/index.js',
-  TYPESCRIPT_CDN: 'https://cdn.jsdelivr.net/npm/[email protected]/index.js'
-}
+  BABEL_CDN: "https://unpkg.com/@babel/[email protected]/babel.js",
+  PUG_CDN: "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
+  CSSNEXT_CDN:
+    "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
+  POSTCSS_CDN:
+    "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
+  TYPESCRIPT_CDN:
+    "https://cdn.jsdelivr.net/npm/[email protected]/index.js",
+};
 
 module.exports = {
-  extendWebpack(config) {
-    config.module.set('noParse', /babel-preset-vue/)
-
-    config.module.rule('js')
-      .include
-      .add(nodeModules())
-
-    config.node.set('fs', 'empty')
-
-    config.externals({
-      electron: 'commonjs electron'
-    })
+  entry: "./src/index.js",
+  output: {
+    sourceMap: false,
+    publicUrl: "/",
   },
-  production: {
-    sourceMap: false
+  chainWebpack(config) {
+    config.module.set("noParse", /babel-preset-poi/);
+    config.module.rule("js").include.add(nodeModules());
+    config.node.set("fs", "empty");
+    config.externals({
+      electron: "commonjs electron",
+    });
   },
-  hash: false,
-  homepage: '/',
-  env: Object.assign({
-    VERSION: `v${pkg.version}-${repoLatestCommit().commit.slice(0, 7)}`,
-    LATEST_COMMIT: repoLatestCommit().commit.slice(0, 7)
-  }, cdns),
-  presets: [
-    require('poi-preset-bundle-report')(),
-    require('poi-preset-babel-minify')(),
-    require('poi-preset-offline')({
-      pluginOptions: {
-        version: '[hash]',
+  plugins: [
+    { resolve: "poi-preset-bundle-report" },
+    { resolve: "poi-preset-babel-minify", options: { removeUndefined: false } },
+    {
+      resolve: "poi-preset-offline",
+      options: {
+        version: "[hash]",
         autoUpdate: true,
         safeToUseOptionalCaches: true,
         caches: {
-          main: ['index.html', 'client.*', 'vendor.*', 'editor-page.chunk.js'],
-          additional: ['*.chunk.js', ':externals:'],
-          optional: [':rest:']
+          main: ["index.html", "client.*", "vendor.*", "editor-page.chunk.js"],
+          additional: ["*.chunk.js", ":externals:"],
+          optional: [":rest:"],
         },
         ServiceWorker: {
           events: true,
-          navigateFallbackURL: '/'
+          navigateFallbackURL: "/",
         },
         AppCache: {
           events: true,
-          FALLBACK: { '/': '/' }
+          FALLBACK: { "/": "/" },
         },
-        externals: [].concat(Object.keys(cdns).reduce((res, name) => {
-          return res.concat(cdns[name])
-        }, []))
-      }
-    })
+        externals: [].concat(
+          Object.keys(cdns).reduce((res, name) => {
+            return res.concat(cdns[name]);
+          }, [])
+        ),
+      },
+    },
   ],
-  babel: {
-    babelrc: false,
-    presets: [
-      require.resolve('babel-preset-poi')
-    ],
-    plugins: [[require.resolve('babel-plugin-component'), [
-      {
-        libraryName: 'element-ui',
-        styleLibraryName: 'theme-chalk'
-      }
-    ]]]
-  }
-}
+  envs: Object.assign(
+    {
+      VERSION: `v${pkg.version}-${LATEST_COMMIT || 'latest'}`,
+      LATEST_COMMIT,
+    },
+    cdns
+  ),
+};