diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f3b1406 --- /dev/null +++ b/.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 }] + ] +} diff --git a/.circleci/config.yml b/.circleci/config.yml index 9165ceb..6f87198 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/README.md b/README.md index 8143ac0..e1f2ea0 100644 --- a/README.md +++ b/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) diff --git a/docs/add-transformer.md b/docs/add-transformer.md deleted file mode 100644 index 6c12345..0000000 --- a/docs/add-transformer.md +++ /dev/null @@ -1,5 +0,0 @@ -1. Add it to the dropdown menu of relevant editor. -2. Define the lazy-load logic in `src/utils/transformer.js` -3. Update the `updateTransformer` action in `src/store/index.js` -4. Update `getHumanlizedTransformerName` `getEditorModeByTransfomer` in `src/utils/index.js` -5. Update transform logic in `src/utils/transform.js` diff --git a/docs/embed.md b/docs/embed.md deleted file mode 100644 index 9b190ed..0000000 --- a/docs/embed.md +++ /dev/null @@ -1,3 +0,0 @@ -You can embed the URL using an iframe in your website. - -Optionally append `?readonly` to make the editor read-only. diff --git a/index.ejs b/index.ejs index df82a39..50e6b91 100644 --- a/index.ejs +++ b/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') } diff --git a/package.json b/package.json index 9fba9e7..9e7ccb5 100644 --- a/package.json +++ b/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" } } diff --git a/poi.config.js b/poi.config.js index ac9bc7e..dbe4ddf 100644 --- a/poi.config.js +++ b/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/standalone@7.0.0-beta.32/babel.min.js', - PUG_CDN: 'https://cdn.jsdelivr.net/npm/browserified-pug@0.3.0/index.js', - CSSNEXT_CDN: 'https://cdn.jsdelivr.net/npm/browserified-postcss-cssnext@0.3.0/index.js', - POSTCSS_CDN: 'https://cdn.jsdelivr.net/npm/browserified-postcss@0.3.0/index.js', - TYPESCRIPT_CDN: 'https://cdn.jsdelivr.net/npm/browserified-typescript@0.3.0/index.js' -} + BABEL_CDN: "https://unpkg.com/@babel/standalone@7.0.0-beta.32/babel.js", + PUG_CDN: "https://cdn.jsdelivr.net/npm/browserified-pug@0.3.0/index.js", + CSSNEXT_CDN: + "https://cdn.jsdelivr.net/npm/browserified-postcss-cssnext@0.3.0/index.js", + POSTCSS_CDN: + "https://cdn.jsdelivr.net/npm/browserified-postcss@0.3.0/index.js", + TYPESCRIPT_CDN: + "https://cdn.jsdelivr.net/npm/browserified-typescript@0.3.0/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 + ), +}; diff --git a/src/boilerplates/es-import/codepan.js b/src/boilerplates/es-import/codepan.js index fd88953..b0bb981 100644 --- a/src/boilerplates/es-import/codepan.js +++ b/src/boilerplates/es-import/codepan.js @@ -1,12 +1,15 @@ -import babel from '@babel/core' -import env from '@babel/preset-env' +import "@babel/standalone"; -const { code } = babel.transform(` -class Foo { - bar() {} -} -`, { - presets: [env] -}) +const { code } = Babel.transform( + ` + class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + } +`, + {} +); -console.log(code) +console.log(code); diff --git a/src/boilerplates/es-import/index.js b/src/boilerplates/es-import/index.js index 9bd2784..d790f1b 100644 --- a/src/boilerplates/es-import/index.js +++ b/src/boilerplates/es-import/index.js @@ -1,11 +1,11 @@ export default async () => { - const jsCode = await import('!raw-loader!./codepan.js') + const jsCode = await import("!raw-loader!./codepan.js"); return { js: { code: jsCode, - transformer: 'babel' + transformer: "babel", }, - showPans: ['js', 'console'] - } -} + showPans: ["js", "console"], + }; +}; diff --git a/src/boilerplates/hyperapp/codepan.html b/src/boilerplates/hyperapp/codepan.html index ccdc037..65b20b2 100644 --- a/src/boilerplates/hyperapp/codepan.html +++ b/src/boilerplates/hyperapp/codepan.html @@ -1 +1 @@ - + diff --git a/src/boilerplates/hyperapp/codepan.js b/src/boilerplates/hyperapp/codepan.js index 70bad09..9c9cc9e 100644 --- a/src/boilerplates/hyperapp/codepan.js +++ b/src/boilerplates/hyperapp/codepan.js @@ -1,21 +1,13 @@ /* @jsx h */ -const { h, app } = hyperapp - -const state = { - count: 0 -} - -const actions = { - down: () => state => ({ count: state.count - 1 }), - up: () => state => ({ count: state.count + 1 }) -} - -const view = (state, actions) => ( -
-

{state.count}

- - -
-) - -const main = app(state, actions, view, document.body) +import { h, app } from "hyperapp"; + +app({ + init: 0, + view: (state) => + h("div", {}, [ + h("h2", {}, state), + h("button", { onClick: (state) => state - 1 }, "Decrement"), + h("button", { onClick: (state) => state + 1 }, "Increment"), + ]), + node: document.body.appendChild(document.createElement("div")), +}); diff --git a/src/boilerplates/hyperapp/index.js b/src/boilerplates/hyperapp/index.js index 07baaea..5ec3c3c 100644 --- a/src/boilerplates/hyperapp/index.js +++ b/src/boilerplates/hyperapp/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, js: { code: jsCode, - transformer: 'babel' + transformer: "babel", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/local-storage/codepan.html b/src/boilerplates/local-storage/codepan.html new file mode 100644 index 0000000..e69de29 diff --git a/src/boilerplates/local-storage/codepan.js b/src/boilerplates/local-storage/codepan.js new file mode 100644 index 0000000..e69de29 diff --git a/src/boilerplates/local-storage/index.js b/src/boilerplates/local-storage/index.js new file mode 100644 index 0000000..b771362 --- /dev/null +++ b/src/boilerplates/local-storage/index.js @@ -0,0 +1,17 @@ +export default () => { + return { + js: { + code: localStorage.getItem("codepan.js") || "", + transformer: "jsx", + }, + html: { + code: localStorage.getItem("codepan.html") || "", + transformer: "html", + }, + css: { + code: localStorage.getItem("codepan.css") || "", + transformer: "css", + }, + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/pixi/codepan.html b/src/boilerplates/pixi/codepan.html index 029e826..b2df96a 100644 --- a/src/boilerplates/pixi/codepan.html +++ b/src/boilerplates/pixi/codepan.html @@ -1,2 +1,2 @@ - + diff --git a/src/boilerplates/pixi/codepan.js b/src/boilerplates/pixi/codepan.js index a887371..fbb1fb5 100644 --- a/src/boilerplates/pixi/codepan.js +++ b/src/boilerplates/pixi/codepan.js @@ -1,22 +1,21 @@ -const sprite = createSprite() -const app = createApp() +const sprite = createSprite(); +const app = createApp(); function createSprite() { - const sprite = PIXI.Sprite.from('https://pixijs.io/examples/examples/assets/bunny.png') - sprite.anchor.set(0.5) - sprite.scale.set(3) - return sprite + const bunny = "https://pixijs.io/examples/examples/assets/bunny.png"; + const sprite = PIXI.Sprite.from(bunny); + sprite.anchor.set(0.5); + sprite.scale.set(3); + return sprite; } function createApp() { - return new PIXI.Tiled.FullscreenApplication(tick, { - backgroundColor: 0xffffff - }) + return new PIXI.Tiled.FullscreenApplication(tick, { transparent: true }); } function tick(time) { - sprite.position.set(innerWidth / 2, innerHeight / 2) - sprite.rotation = time / 100 + sprite.position.set(innerWidth / 2, innerHeight / 2); + sprite.rotation = time / 100; } -app.stage.addChild(sprite) +app.stage.addChild(sprite); diff --git a/src/boilerplates/pixi/index.js b/src/boilerplates/pixi/index.js index ef42068..ab3bdc9 100644 --- a/src/boilerplates/pixi/index.js +++ b/src/boilerplates/pixi/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { js: { code: jsCode, - transformer: 'js' + transformer: "jsx", }, html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/preact/codepan.js b/src/boilerplates/preact/codepan.js index 698f3f6..597d7ec 100644 --- a/src/boilerplates/preact/codepan.js +++ b/src/boilerplates/preact/codepan.js @@ -1,28 +1,30 @@ /* @jsx h */ -const { Component, h, render } = preact +const { Component, h, render } = preact; class App extends Component { state = { - count: 0 - } + count: 0, + }; - inc = () => this.setState({ - count: this.state.count + 1 - }) + inc = () => + this.setState({ + count: this.state.count + 1, + }); - dec = () => this.setState({ - count: this.state.count - 1 - }) + dec = () => + this.setState({ + count: this.state.count - 1, + }); render() { return (
-

{ this.state.count }

+

{this.state.count}

- ) + ); } } -render(, document.body) +render(, document.body); diff --git a/src/boilerplates/preact/index.js b/src/boilerplates/preact/index.js index 07baaea..5ec3c3c 100644 --- a/src/boilerplates/preact/index.js +++ b/src/boilerplates/preact/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, js: { code: jsCode, - transformer: 'babel' + transformer: "babel", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/react/codepan.js b/src/boilerplates/react/codepan.js index 85c6e96..d80a9e2 100644 --- a/src/boilerplates/react/codepan.js +++ b/src/boilerplates/react/codepan.js @@ -1,25 +1,27 @@ class App extends React.Component { state = { - count: 0 - } + count: 0, + }; - inc = () => this.setState({ - count: this.state.count + 1 - }) + inc = () => + this.setState({ + count: this.state.count + 1, + }); - dec = () => this.setState({ - count: this.state.count - 1 - }) + dec = () => + this.setState({ + count: this.state.count - 1, + }); render() { return (
-

{ this.state.count }

+

{this.state.count}

- ) + ); } } -ReactDOM.render(, document.getElementById('app')) +ReactDOM.render(, document.getElementById("app")); diff --git a/src/boilerplates/react/index.js b/src/boilerplates/react/index.js index 07baaea..5ec3c3c 100644 --- a/src/boilerplates/react/index.js +++ b/src/boilerplates/react/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, js: { code: jsCode, - transformer: 'babel' + transformer: "babel", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/rust/index.js b/src/boilerplates/rust/index.js index 48179ac..4f91764 100644 --- a/src/boilerplates/rust/index.js +++ b/src/boilerplates/rust/index.js @@ -1,9 +1,9 @@ export default async () => { return { js: { - code: await import('!raw-loader!./codepan.rs'), - transformer: 'rust' + code: await import("!raw-loader!./codepan.rs"), + transformer: "rust", }, - showPans: ['js', 'console'] - } -} + showPans: ["js", "console"], + }; +}; diff --git a/src/boilerplates/rxjs/codepan.js b/src/boilerplates/rxjs/codepan.js index 0fb36ce..baad4c5 100644 --- a/src/boilerplates/rxjs/codepan.js +++ b/src/boilerplates/rxjs/codepan.js @@ -5,4 +5,4 @@ */ const source = Rx.Observable.timer(1000, 2000); //output: 0,1,2,3,4,5...... -const subscribe = source.subscribe(val => console.log(val)); +const subscribe = source.subscribe((val) => console.log(val)); diff --git a/src/boilerplates/rxjs/index.js b/src/boilerplates/rxjs/index.js index 9337a29..620d919 100644 --- a/src/boilerplates/rxjs/index.js +++ b/src/boilerplates/rxjs/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { js: { code: jsCode, - transformer: 'js' + transformer: "js", }, html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, - showPans: ['js', 'console'] - } -} + showPans: ["js", "console"], + }; +}; diff --git a/src/boilerplates/svelte/index.js b/src/boilerplates/svelte/index.js index 48f3009..3bf758b 100644 --- a/src/boilerplates/svelte/index.js +++ b/src/boilerplates/svelte/index.js @@ -1,11 +1,11 @@ export default async () => { - const jsCode = await import('!raw-loader!./codepan.svelte') + const jsCode = await import("!raw-loader!./codepan.svelte"); return { js: { code: jsCode, - transformer: 'svelte' + transformer: "svelte", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/vue-jsx/codepan.html b/src/boilerplates/vue-jsx/codepan.html index e341b9a..6ff4047 100644 --- a/src/boilerplates/vue-jsx/codepan.html +++ b/src/boilerplates/vue-jsx/codepan.html @@ -1,3 +1,3 @@ - +
diff --git a/src/boilerplates/vue-jsx/codepan.js b/src/boilerplates/vue-jsx/codepan.js index d1b8663..6bbbee2 100644 --- a/src/boilerplates/vue-jsx/codepan.js +++ b/src/boilerplates/vue-jsx/codepan.js @@ -1,13 +1,15 @@ new Vue({ - el: '#app', - data: { count: 0 }, + el: "#app", + data: function () { + return { count: 0 }; + }, methods: { inc() { - this.count++ + this.count++; }, dec() { - this.count-- - } + this.count--; + }, }, render() { return ( @@ -16,6 +18,6 @@ new Vue({ - ) - } -}) + ); + }, +}); diff --git a/src/boilerplates/vue-jsx/index.js b/src/boilerplates/vue-jsx/index.js index 7d6947e..b92941c 100644 --- a/src/boilerplates/vue-jsx/index.js +++ b/src/boilerplates/vue-jsx/index.js @@ -1,23 +1,29 @@ export default async () => { const [htmlCode, jsCode, cssCode] = await Promise.all([ - import(/* webpackChunkName: "boilerplate-vue-jsx" */ '!raw-loader!./codepan.html'), - import(/* webpackChunkName: "boilerplate-vue-jsx" */'!raw-loader!./codepan.js'), - import(/* webpackChunkName: "boilerplate-vue-jsx" */'!raw-loader!./codepan.css') - ]) + import( + /* webpackChunkName: "boilerplate-vue-jsx" */ "!raw-loader!./codepan.html" + ), + import( + /* webpackChunkName: "boilerplate-vue-jsx" */ "!raw-loader!./codepan.js" + ), + import( + /* webpackChunkName: "boilerplate-vue-jsx" */ "!raw-loader!./codepan.css" + ), + ]); return { js: { code: jsCode, - transformer: 'vue-jsx' + transformer: "vue-jsx", }, html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, css: { code: cssCode, - transformer: 'css' + transformer: "css", }, - showPans: ['js', 'output'] - } -} + showPans: ["js", "output"], + }; +}; diff --git a/src/boilerplates/vue/codepan.html b/src/boilerplates/vue/codepan.html index aac70a5..e28d993 100644 --- a/src/boilerplates/vue/codepan.html +++ b/src/boilerplates/vue/codepan.html @@ -1,4 +1,4 @@ - +

{{ count }}

diff --git a/src/boilerplates/vue/codepan.js b/src/boilerplates/vue/codepan.js index db809ef..ef41621 100644 --- a/src/boilerplates/vue/codepan.js +++ b/src/boilerplates/vue/codepan.js @@ -1,12 +1,14 @@ new Vue({ - el: '#app', - data: { count: 0 }, + el: "#app", + data: function () { + return { count: 0 }; + }, methods: { inc() { - this.count++ + this.count++; }, dec() { - this.count-- - } - } -}) + this.count--; + }, + }, +}); diff --git a/src/boilerplates/vue/index.js b/src/boilerplates/vue/index.js index e804a3c..66ba5b3 100644 --- a/src/boilerplates/vue/index.js +++ b/src/boilerplates/vue/index.js @@ -1,18 +1,18 @@ export default async () => { const [htmlCode, jsCode] = await Promise.all([ - import('!raw-loader!./codepan.html'), - import('!raw-loader!./codepan.js') - ]) + import("!raw-loader!./codepan.html"), + import("!raw-loader!./codepan.js"), + ]); return { js: { code: jsCode, - transformer: 'vue-jsx' + transformer: "vue-jsx", }, html: { code: htmlCode, - transformer: 'html' + transformer: "html", }, - showPans: ['html', 'js', 'output'] - } -} + showPans: ["html", "js", "output"], + }; +}; diff --git a/src/components/App.vue b/src/components/App.vue index 8c6d523..a1cfdae 100644 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -5,9 +5,9 @@ @@ -15,71 +15,414 @@ - diff --git a/src/components/CSSPan.vue b/src/components/CSSPan.vue index e051aa2..f9d11c2 100644 --- a/src/components/CSSPan.vue +++ b/src/components/CSSPan.vue @@ -2,39 +2,40 @@
+ >
- + - {{ humanlizedTransformerName }} + {{ humanlizedTransformerName }} + - CSS - cssnext - LESS - SASS - SCSS - Stylus + CSS + cssnext + LESS + SASS + SCSS + Stylus
- +
- - + - + - +