├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .gitignore ├── .stylelintrc ├── README.md ├── babel.config.js ├── jest.config.js ├── lerna.json ├── package.json ├── packages ├── babel │ ├── index.js │ └── package.json ├── babelweb │ ├── index.js │ └── package.json ├── server │ ├── .env.example │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── app.ts │ │ ├── config.ts │ │ └── index.ts │ ├── test │ │ └── babel-transformer.js │ └── webpack.config.server.js ├── web │ ├── .env.example │ ├── __mocks__ │ │ └── fileMock.js │ ├── babel.config.js │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── App.tsx │ │ ├── BlockCodeMirrorEditor.tsx │ │ ├── BlockMonacoCodeEditor.tsx │ │ ├── BlockSimpleCodeEditor.tsx │ │ ├── Root.tsx │ │ ├── RunnableBlockCode.tsx │ │ ├── config.tsx │ │ ├── createLiveEditor.tsx │ │ ├── index.html │ │ ├── index.tsx │ │ └── initialCode.tsx │ ├── test │ │ ├── babel-transformer.js │ │ ├── jest.setup.js │ │ └── polyfill.js │ └── webpack.config.js └── webpack │ ├── package.json │ └── src │ └── webpackConfig.js ├── prettier.config.js ├── test └── customBabelTransformer.js ├── tsconfig.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | .circleci 2 | .github 3 | build 4 | data 5 | digital_assets 6 | flow-typed 7 | hard-source-cache 8 | public 9 | __generated__ 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | parser: '@typescript-eslint/parser', 5 | env: { 6 | browser: true, 7 | node: true, 8 | jest: true, 9 | es6: true, 10 | 'cypress/globals': true, 11 | serviceworker: true, 12 | }, 13 | plugins: [ 14 | 'react', 15 | 'flowtype', 16 | 'import', 17 | 'cypress', 18 | 'relay', 19 | '@typescript-eslint', 20 | 'react-hooks', 21 | ], 22 | parserOptions: { 23 | ecmaVersion: 10, 24 | sourceType: 'module', 25 | ecmaFeatures: { 26 | modules: true, 27 | }, 28 | }, 29 | extends: [ 30 | 'eslint:recommended', 31 | 'plugin:react/recommended', 32 | 'plugin:import/errors', 33 | 'plugin:relay/recommended', 34 | 'plugin:@typescript-eslint/eslint-recommended', 35 | 'plugin:@typescript-eslint/recommended', 36 | 'prettier/@typescript-eslint', 37 | ], 38 | rules: { 39 | 'comma-dangle': [2, 'always-multiline'], 40 | quotes: [2, 'single', { allowTemplateLiterals: true, avoidEscape: true }], 41 | 'jsx-quotes': [2, 'prefer-single'], 42 | 'react/prop-types': 0, 43 | 'no-case-declarations': 0, 44 | 'react/jsx-no-bind': 0, 45 | 'react/display-name': 0, 46 | 'new-cap': 0, 47 | 'no-unexpected-multiline': 0, 48 | 'no-class-assign': 1, 49 | 'no-console': 2, 50 | 'object-curly-spacing': [1, 'always'], 51 | 'import/first': 2, 52 | 'import/default': 0, 53 | 'no-unused-vars': ['error', { ignoreRestSiblings: true }], 54 | 'no-extra-boolean-cast': 0, 55 | 'import/named': 0, 56 | 'import/namespace': [2, { allowComputed: true }], 57 | 'import/no-duplicates': 2, 58 | 'import/order': [2, { 'newlines-between': 'always-and-inside-groups' }], 59 | 'react/no-children-prop': 1, 60 | 'react/no-deprecated': 1, 61 | 'import/no-cycle': 1, 62 | 'import/no-self-import': 1, 63 | 'relay/graphql-syntax': 'error', 64 | 'relay/compat-uses-vars': 'warn', 65 | 'relay/graphql-naming': 'error', 66 | 'relay/generated-flow-types': 'warn', 67 | 'relay/no-future-added-value': 'warn', 68 | 'relay/unused-fields': 0, 69 | indent: 0, 70 | '@typescript-eslint/indent': 0, 71 | '@typescript-eslint/camelcase': 0, 72 | '@typescript-eslint/explicit-function-return-type': 0, 73 | 'interface-over-type-literal': 0, 74 | '@typescript-eslint/consistent-type-definitions': 0, 75 | '@typescript-eslint/prefer-interface': 0, 76 | 'lines-between-class-members': 0, 77 | '@typescript-eslint/explicit-member-accessibility': 0, 78 | '@typescript-eslint/no-non-null-assertion': 0, 79 | '@typescript-eslint/no-unused-vars': [ 80 | 'error', 81 | { 82 | ignoreRestSiblings: true, 83 | }, 84 | ], 85 | '@typescript-eslint/no-var-requires': 1, 86 | 'react-hooks/rules-of-hooks': 'error', 87 | // disable as it can cause more harm than good 88 | //'react-hooks/exhaustive-deps': 'warn', 89 | '@typescript-eslint/no-empty-function': 1, 90 | '@typescript-eslint/interface-name-prefix': 0, 91 | }, 92 | settings: { 93 | 'import/resolver': { 94 | node: true, 95 | 'eslint-import-resolver-typescript': true, 96 | 'eslint-import-resolver-lerna': { 97 | packages: path.resolve(__dirname, 'packages'), 98 | }, 99 | }, 100 | }, 101 | }; 102 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | schema.json linguist-generated 2 | *.json merge=json 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.sublime-project 3 | *.sublime-workspace 4 | .idea/ 5 | 6 | lib-cov 7 | *.seed 8 | *.log 9 | *.csv 10 | *.dat 11 | *.out 12 | *.pid 13 | *.gz 14 | *.map 15 | 16 | pids 17 | logs 18 | results 19 | test-results 20 | 21 | node_modules 22 | npm-debug.log 23 | 24 | dump.rdb 25 | bundle.js 26 | 27 | build 28 | dist 29 | coverage 30 | .nyc_output 31 | .env 32 | 33 | graphql.*.json 34 | junit.xml 35 | 36 | .vs 37 | 38 | test/globalConfig.json 39 | distTs 40 | 41 | # Random things to ignore 42 | ignore/ 43 | package-lock.json 44 | /yarn-offline-cache 45 | .cache 46 | 47 | **/node_modules 48 | .idea 49 | yarn-error.log 50 | .vs/ 51 | 52 | # IDE/Editor GraphQL Extensions 53 | .gqlconfig 54 | 55 | # Relay modern 56 | __generated__/ 57 | 58 | # Flow log 59 | flow.log 60 | 61 | # Random things to ignore 62 | yarn-offline-cache 63 | 64 | hard-source-cache/ 65 | **/hard-source-cache/ 66 | 67 | # Cypress 68 | cypress/videos 69 | cypress/screenshots 70 | 71 | differencify_reports 72 | .parcel-cache 73 | 74 | .vscode 75 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-standard", 5 | "stylelint-config-styled-components" 6 | ], 7 | "syntax": "scss", 8 | "rules": { 9 | "block-no-empty": null, 10 | "declaration-block-no-redundant-longhand-properties": null, 11 | "block-closing-brace-newline-before": null, 12 | "indentation": null, 13 | "color-hex-length": null, 14 | "font-family-no-missing-generic-family-keyword": null, 15 | "color-hex-case": "lower", 16 | "property-no-unknown": [ true, { 17 | "ignoreProperties": [ 18 | "padding-vertical", 19 | "padding-horizontal", 20 | "shadow-color", 21 | "shadow-offset", 22 | "shadow-radius", 23 | "shadow-opacity", 24 | "margin-horizontal", 25 | "margin-vertical", 26 | "aspect-ratio" 27 | ] 28 | } 29 | ] 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Playground 2 | 3 | Run, save and share JavaScript Playgrounds. 4 | 5 | Similar to RunKit and iPython 6 | 7 | ## How to run 8 | 9 | ```jsx 10 | yarn web 11 | ``` 12 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-react', 4 | [ 5 | '@babel/preset-env', 6 | { 7 | targets: { 8 | node: 'current', 9 | }, 10 | }, 11 | ], 12 | '@babel/preset-typescript', 13 | ], 14 | plugins: [], 15 | }; 16 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | projects: [ 3 | '/packages/server/jest.config.js', 4 | '/packages/web/jest.config.js', 5 | ], 6 | transform: { 7 | '^.+\\.(js|ts|tsx)?$': require('path').resolve('./customBabelTransformer'), 8 | }, 9 | moduleFileExtensions: ['js', 'css', 'ts', 'tsx'], 10 | }; 11 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages": [ 3 | "packages/*" 4 | ], 5 | "version": "1.0.0", 6 | "npmClient": "yarn", 7 | "useWorkspaces": true 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node-playground", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "@types/babel__standalone": "^7.1.2", 6 | "@types/escodegen": "^0.0.6", 7 | "@types/eslint": "6.8.0", 8 | "@types/eslint-plugin-prettier": "^3.1.0", 9 | "@types/object-path": "^0.11.0", 10 | "@types/prettier": "2.0.2", 11 | "@types/stylelint": "9.10.1", 12 | "@typescript-eslint/eslint-plugin": "2.19.0", 13 | "@typescript-eslint/parser": "2.19.0", 14 | "eslint": "6.8.0", 15 | "eslint-config-airbnb": "17.1.0", 16 | "eslint-config-okonet": "7.0.2", 17 | "eslint-config-prettier": "^6.0.0", 18 | "eslint-config-shellscape": "2.0.2", 19 | "eslint-import-resolver-lerna": "^1.1.0", 20 | "eslint-import-resolver-typescript": "1.1.1", 21 | "eslint-import-resolver-webpack": "0.11.1", 22 | "eslint-plugin-cypress": "2.2.1", 23 | "eslint-plugin-flowtype": "3.11.1", 24 | "eslint-plugin-import": "2.18.0", 25 | "eslint-plugin-jsx-a11y": "6.2.1", 26 | "eslint-plugin-node": "8.0.1", 27 | "eslint-plugin-prettier": "^3.1.0", 28 | "eslint-plugin-react": "7.14.2", 29 | "eslint-plugin-react-hooks": "2.3.0", 30 | "eslint-plugin-relay": "1.3.2", 31 | "eslint-plugin-typescript": "0.14.0", 32 | "jest": "26.1.0", 33 | "jest-junit": "11.0.1", 34 | "lerna": "3.22.1", 35 | "lint-staged": "10.2.11", 36 | "pre-commit": "1.2.2", 37 | "prettier": "2.0.5", 38 | "stylelint": "9.2.0", 39 | "stylelint-config-standard": "18.2.0", 40 | "stylelint-config-styled-components": "0.1.1", 41 | "stylelint-processor-styled-components": "1.3.1", 42 | "typescript": "3.9.7" 43 | }, 44 | "license": "MIT", 45 | "lint-staged": { 46 | "*.{js,ts,tsx}": [ 47 | "yarn prettier", 48 | "yarn stylelint --fix", 49 | "eslint --fix" 50 | ], 51 | "*.yml": [ 52 | "prettier --write" 53 | ] 54 | }, 55 | "main": "index.js", 56 | "pre-commit": "lint:staged", 57 | "private": true, 58 | "repository": { 59 | "type": "git", 60 | "url": "https://github.com/sibelius/node-playground.git" 61 | }, 62 | "scripts": { 63 | "b": "babel-node --extensions \".es6,.js,.es,.jsx,.mjs,.ts,.tsx\"", 64 | "commitmsg": "commitlint -e $GIT_PARAMS", 65 | "jest": "jest", 66 | "lint:staged": "lint-staged", 67 | "prettier": "prettier --write", 68 | "server": "yarn workspace @playground/server start", 69 | "web": "yarn workspace @playground/web start" 70 | }, 71 | "workspaces": { 72 | "packages": [ 73 | "packages/*" 74 | ] 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /packages/babel/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-react', 4 | [ 5 | '@babel/preset-env', 6 | { 7 | targets: { 8 | node: 'current', 9 | }, 10 | }, 11 | ], 12 | '@babel/preset-typescript', 13 | ], 14 | plugins: [], 15 | }; 16 | -------------------------------------------------------------------------------- /packages/babel/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@playground/babel", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@babel/cli": "7.10.5", 6 | "@babel/core": "7.10.5", 7 | "@babel/node": "7.10.5", 8 | "@babel/plugin-proposal-async-generator-functions": "7.10.5", 9 | "@babel/plugin-proposal-class-properties": "7.10.4", 10 | "@babel/plugin-proposal-export-default-from": "7.10.4", 11 | "@babel/plugin-proposal-export-namespace-from": "7.10.4", 12 | "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4", 13 | "@babel/plugin-proposal-object-rest-spread": "7.10.4", 14 | "@babel/plugin-proposal-optional-chaining": "7.10.4", 15 | "@babel/plugin-transform-async-to-generator": "7.10.4", 16 | "@babel/preset-env": "7.10.4", 17 | "@babel/preset-react": "7.10.4", 18 | "@babel/preset-typescript": "7.10.4" 19 | }, 20 | "devDependencies": { 21 | "@types/babel__core": "7.1.9", 22 | "@types/babel__preset-env": "7.9.0" 23 | }, 24 | "main": "index.js" 25 | } 26 | -------------------------------------------------------------------------------- /packages/babelweb/index.js: -------------------------------------------------------------------------------- 1 | const babelCommons = require('@playground/babel'); 2 | 3 | module.exports = (api) => { 4 | api.cache.using(() => process.env.NODE_ENV); 5 | 6 | return { 7 | presets: [...babelCommons.presets], 8 | plugins: [ 9 | ...babelCommons.plugins, 10 | // Applies the react-refresh Babel plugin on non-production modes only 11 | ...(!api.env('production') && ['react-refresh/babel']), 12 | ], 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /packages/babelweb/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@playground/babelweb", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@babel/cli": "7.10.5", 6 | "@babel/core": "7.10.5", 7 | "@babel/node": "7.10.5", 8 | "@babel/plugin-proposal-async-generator-functions": "7.10.5", 9 | "@babel/plugin-proposal-class-properties": "7.10.4", 10 | "@babel/plugin-proposal-export-default-from": "7.10.4", 11 | "@babel/plugin-proposal-export-namespace-from": "7.10.4", 12 | "@babel/plugin-proposal-nullish-coalescing-operator": "7.10.4", 13 | "@babel/plugin-proposal-object-rest-spread": "7.10.4", 14 | "@babel/plugin-proposal-optional-chaining": "7.10.4", 15 | "@babel/plugin-transform-async-to-generator": "7.10.4", 16 | "@babel/preset-env": "7.10.4", 17 | "@babel/preset-react": "7.10.4", 18 | "@babel/preset-typescript": "7.10.4" 19 | }, 20 | "devDependencies": { 21 | "@types/babel__core": "7.1.9", 22 | "@types/babel__preset-env": "7.9.0" 23 | }, 24 | "main": "index.js" 25 | } 26 | -------------------------------------------------------------------------------- /packages/server/.env.example: -------------------------------------------------------------------------------- 1 | PORT=7500 -------------------------------------------------------------------------------- /packages/server/babel.config.js: -------------------------------------------------------------------------------- 1 | const config = require('@playground/babel'); 2 | 3 | module.exports = config; 4 | -------------------------------------------------------------------------------- /packages/server/jest.config.js: -------------------------------------------------------------------------------- 1 | const pack = require('./package'); 2 | 3 | module.exports = { 4 | displayName: pack.name, 5 | name: pack.name, 6 | testPathIgnorePatterns: ['/node_modules/', './dist'], 7 | coverageReporters: ['lcov', 'html'], 8 | resetModules: false, 9 | reporters: ['default', 'jest-junit'], 10 | transform: { 11 | '^.+\\.(js|ts|tsx)?$': '/test/babel-transformer', 12 | }, 13 | testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(js|ts|tsx)?$', 14 | moduleFileExtensions: ['ts', 'js', 'tsx', 'json'], 15 | }; 16 | -------------------------------------------------------------------------------- /packages/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@playground/server", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@babel/polyfill": "7.8.3", 6 | "bcryptjs": "2.4.3", 7 | "dotenv-safe": "^8.1.0", 8 | "isomorphic-fetch": "^2.2.1", 9 | "jsonwebtoken": "8.5.1", 10 | "kcors": "^2.2.2", 11 | "koa": "^2.7.0", 12 | "koa-bodyparser": "^4.2.1", 13 | "koa-logger": "^3.2.1", 14 | "koa-router": "^7.4.0", 15 | "supertest": "4.0.2" 16 | }, 17 | "devDependencies": { 18 | "@playground/babel": "*", 19 | "@types/bcryptjs": "2.4.2", 20 | "@types/dotenv-safe": "^8.1.0", 21 | "@types/isomorphic-fetch": "^0.0.35", 22 | "@types/jsonwebtoken": "8.5.0", 23 | "@types/kcors": "^2.2.3", 24 | "@types/koa": "^2.11.3", 25 | "@types/koa-bodyparser": "^4.3.0", 26 | "@types/koa-logger": "^3.1.1", 27 | "@types/koa-router": "^7.4.1", 28 | "@types/supertest": "2.0.10", 29 | "@types/webpack": "4.39.1", 30 | "@types/webpack-node-externals": "1.7.1", 31 | "@types/webpack-plugin-serve": "0.10.0", 32 | "babel-loader": "^8.0.6", 33 | "reload-server-webpack-plugin": "^1.0.1", 34 | "webpack": "4.39.1", 35 | "webpack-cli": "3.3.6", 36 | "webpack-node-externals": "1.7.2", 37 | "webpack-plugin-serve": "0.12.0" 38 | }, 39 | "main": "dist/index.js", 40 | "module": "src/index.ts", 41 | "scripts": { 42 | "build": "babel src --extensions \".es6,.js,.es,.jsx,.mjs,.ts,.tsx\" --ignore *.spec.js --out-dir dist --copy-files --source-maps --verbose", 43 | "jest": "jest", 44 | "serve": "node ./dist/index.js", 45 | "start": "webpack --watch --progress --config webpack.config.server.js", 46 | "update-schema": "babel-node --extensions \".es6,.js,.es,.jsx,.mjs,.ts\" ./scripts/updateSchema.ts" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /packages/server/src/app.ts: -------------------------------------------------------------------------------- 1 | import Koa from 'koa'; 2 | import Router from 'koa-router'; 3 | import logger from 'koa-logger'; 4 | import cors from 'kcors'; 5 | import bodyParser from 'koa-bodyparser'; 6 | 7 | import { config } from './config'; 8 | 9 | const app = new Koa(); 10 | 11 | app.keys = [config.JWT_SECRET]; 12 | app.use(bodyParser()); 13 | 14 | app.on('error', (err) => { 15 | // eslint-disable-next-line 16 | console.log('app error: ', err); 17 | }); 18 | 19 | app.use(logger()); 20 | app.use(cors()); 21 | 22 | const router = new Router(); 23 | 24 | router.get('/', async (ctx) => { 25 | ctx.body = 'Welcome to Node Playground'; 26 | }); 27 | 28 | app.use(router.routes()).use(router.allowedMethods()); 29 | 30 | export default app; 31 | -------------------------------------------------------------------------------- /packages/server/src/config.ts: -------------------------------------------------------------------------------- 1 | import path from 'path'; 2 | 3 | import dotenvSafe from 'dotenv-safe'; 4 | 5 | const cwd = process.cwd(); 6 | 7 | const root = path.join.bind(cwd); 8 | 9 | dotenvSafe.config({ 10 | path: root('.env'), 11 | sample: root('.env.example'), 12 | }); 13 | 14 | const ENV = process.env; 15 | 16 | export const config = { 17 | PORT: ENV.PORT || 7500, 18 | JWT_SECRET: ENV.JWT_KEY || 'secret_key', 19 | }; 20 | -------------------------------------------------------------------------------- /packages/server/src/index.ts: -------------------------------------------------------------------------------- 1 | import 'isomorphic-fetch'; 2 | import { createServer } from 'http'; 3 | 4 | import app from './app'; 5 | import { config } from './config'; 6 | 7 | (async () => { 8 | const server = createServer(app.callback()); 9 | 10 | server.listen(config.PORT, () => { 11 | // eslint-disable-next-line 12 | console.log(`server running on port :${config.PORT}`); 13 | }); 14 | })(); 15 | -------------------------------------------------------------------------------- /packages/server/test/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const config = require('@playground/babel'); 2 | 3 | const { createTransformer } = require('babel-jest'); 4 | 5 | module.exports = createTransformer({ 6 | ...config, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/server/webpack.config.server.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const webpack = require('webpack'); 4 | 5 | const WebpackNodeExternals = require('webpack-node-externals'); 6 | const ReloadServerPlugin = require('reload-server-webpack-plugin'); 7 | 8 | const cwd = process.cwd(); 9 | 10 | module.exports = { 11 | mode: 'development', 12 | devtool: 'cheap-eval-source-map', 13 | entry: { 14 | server: [ 15 | // 'webpack/hot/poll?1000', 16 | './src/index.ts', 17 | ], 18 | }, 19 | output: { 20 | path: path.resolve('build'), 21 | filename: 'server.js', 22 | // https://github.com/webpack/webpack/pull/8642 23 | futureEmitAssets: true, 24 | }, 25 | watch: true, 26 | target: 'node', 27 | node: { 28 | fs: true, 29 | __dirname: true, 30 | }, 31 | externals: [ 32 | WebpackNodeExternals({ 33 | whitelist: ['webpack/hot/poll?1000'], 34 | }), 35 | WebpackNodeExternals({ 36 | modulesDir: path.resolve(__dirname, '../../node_modules'), 37 | whitelist: [/@playground/], 38 | }), 39 | ], 40 | resolve: { 41 | extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'], 42 | }, 43 | module: { 44 | rules: [ 45 | { 46 | test: /\.mjs$/, 47 | include: /node_modules/, 48 | type: 'javascript/auto', 49 | }, 50 | { 51 | test: /\.(js|jsx|ts|tsx)?$/, 52 | use: { 53 | loader: 'babel-loader', 54 | }, 55 | exclude: [/node_modules/], 56 | include: [path.join(cwd, 'src'), path.join(cwd, '../')], 57 | }, 58 | ], 59 | }, 60 | plugins: [ 61 | new ReloadServerPlugin({ 62 | script: path.resolve('build', 'server.js'), 63 | }), 64 | new webpack.HotModuleReplacementPlugin(), 65 | new webpack.DefinePlugin({ 66 | 'process.env.NODE_ENV': JSON.stringify('development'), 67 | }), 68 | ], 69 | }; 70 | -------------------------------------------------------------------------------- /packages/web/.env.example: -------------------------------------------------------------------------------- 1 | NODE_ENV=development 2 | PORT=7503 3 | -------------------------------------------------------------------------------- /packages/web/__mocks__/fileMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /packages/web/babel.config.js: -------------------------------------------------------------------------------- 1 | const config = require('@playground/babelweb'); 2 | 3 | module.exports = config; 4 | -------------------------------------------------------------------------------- /packages/web/jest.config.js: -------------------------------------------------------------------------------- 1 | const pkg = require('./package'); 2 | 3 | module.exports = { 4 | name: pkg.name, 5 | displayName: pkg.name, 6 | testPathIgnorePatterns: [ 7 | '/node_modules/', 8 | './dist', 9 | './scripts', 10 | '__generated__', 11 | ], 12 | coverageReporters: ['lcov', 'html'], 13 | reporters: ['default', 'jest-junit'], 14 | transform: { 15 | '^.+\\.(js|ts|tsx)?$': '/test/babel-transformer', 16 | }, 17 | testRegex: '(/__tests__/.*|(\\.|/)(test))\\.(j|t)sx?$', 18 | moduleFileExtensions: ['js', 'css', 'ts', 'tsx', 'json'], 19 | collectCoverageFrom: ['src/**/*.tsx'], 20 | transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'], 21 | moduleDirectories: ['node_modules', 'src'], 22 | moduleNameMapper: { 23 | '\\.(css|less)$': 'identity-obj-proxy', 24 | '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 25 | '/__mocks__/fileMock.js', 26 | }, 27 | setupFilesAfterEnv: ['/test/jest.setup.js'], 28 | setupFiles: ['/test/polyfill.js'], 29 | rootDir: './', 30 | }; 31 | -------------------------------------------------------------------------------- /packages/web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@playground/web", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "@babel/polyfill": "7.8.3", 6 | "@babel/standalone": "^7.11.6", 7 | "@material-ui/core": "4.11.0", 8 | "@material-ui/icons": "4.9.1", 9 | "@material-ui/styles": "4.10.0", 10 | "acorn": "^8.0.1", 11 | "acorn-globals": "^6.0.0", 12 | "codemirror": "5.56.0", 13 | "escodegen": "^2.0.0", 14 | "formik": "2.1.4", 15 | "identity-obj-proxy": "3.0.0", 16 | "isomorphic-fetch": "^2.2.1", 17 | "monaco-editor": "0.20.0", 18 | "monaco-editor-webpack-plugin": "1.9.0", 19 | "notistack": "^0.8.8", 20 | "object-path": "^0.11.4", 21 | "pretty-format": "^26.4.2", 22 | "prismjs": "1.21.0", 23 | "react": "16.13.1", 24 | "react-codemirror2": "7.2.1", 25 | "react-dom": "16.13.1", 26 | "react-error-boundary": "^3.0.2", 27 | "react-infinite-scroller": "1.2.4", 28 | "react-monaco-editor": "0.39.1", 29 | "react-resize-detector": "5.2.0", 30 | "react-router-config": "5.1.1", 31 | "react-router-dom": "5.2.0", 32 | "react-simple-code-editor": "0.11.0", 33 | "rebass": "4.0.7", 34 | "styled-components": "5.1.1", 35 | "styled-media-query": "2.1.2", 36 | "styled-system": "5.1.5", 37 | "use-debounce": "^4.0.0", 38 | "yup": "^0.27.0" 39 | }, 40 | "devDependencies": { 41 | "@playground/babelweb": "*", 42 | "@pmmmwh/react-refresh-webpack-plugin": "^0.3.0-beta.3", 43 | "@testing-library/jest-dom": "^5.1.1", 44 | "@testing-library/react": "^8.0.1", 45 | "@testing-library/user-event": "^4.1.0", 46 | "@types/dotenv-webpack": "^1.8.0", 47 | "@types/isomorphic-fetch": "^0.0.35", 48 | "@types/prismjs": "1.16.1", 49 | "@types/react": "16.9.43", 50 | "@types/react-dom": "16.9.8", 51 | "@types/react-infinite-scroller": "1.2.1", 52 | "@types/react-router-config": "5.0.1", 53 | "@types/react-router-dom": "5.1.5", 54 | "@types/rebass": "4.0.6", 55 | "@types/styled-components": "5.1.1", 56 | "@types/styled-system": "5.1.5", 57 | "@types/testing-library__jest-dom": "^5.9.1", 58 | "@types/webpack-dev-server": "^3.11.0", 59 | "@types/webpack-merge": "4.1.5", 60 | "@types/webpack-plugin-serve": "^0.10.0", 61 | "@types/yup": "^0.29.3", 62 | "babel-loader": "^8.0.6", 63 | "clean-webpack-plugin": "^3.0.0", 64 | "cross-env": "^5.2.0", 65 | "css-loader": "3.2.0", 66 | "dotenv-webpack": "^1.7.0", 67 | "error-overlay-webpack-plugin": "^0.4.1", 68 | "html-webpack-plugin": "4.2.0", 69 | "react-refresh": "0.7.2", 70 | "style-loader": "^0.23.1", 71 | "webpack-cli": "^3.3.9", 72 | "webpack-dev-server": "^3.9.0", 73 | "webpack-merge": "4.2.2", 74 | "webpack-plugin-serve": "^0.11.0" 75 | }, 76 | "main": "dist/index.js", 77 | "module": "src/index.ts", 78 | "scripts": { 79 | "jest": "jest", 80 | "start": "webpack-dev-server --hot" 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /packages/web/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Text } from 'rebass'; 3 | import media from 'styled-media-query'; 4 | import styled from 'styled-components'; 5 | 6 | import AddIcon from '@material-ui/icons/Add'; 7 | import { Button } from '@material-ui/core'; 8 | 9 | import RunnableBlockCode from './RunnableBlockCode'; 10 | import { initialCode } from './initialCode'; 11 | 12 | const Content = styled.div` 13 | margin: 0 auto; 14 | max-width: 50em; 15 | line-height: 1.5; 16 | ${media.lessThan('small')` 17 | margin: 0 20px; 18 | `} 19 | `; 20 | 21 | const App = () => { 22 | const [blocks, setBlocks] = useState([ 23 | { 24 | code: initialCode, 25 | }, 26 | ]); 27 | 28 | const newBlock = () => { 29 | const newBlocks = [ 30 | ...blocks, 31 | { 32 | code: initialCode, 33 | }, 34 | ]; 35 | 36 | setBlocks(newBlocks); 37 | }; 38 | 39 | return ( 40 | 41 | 42 | JavaScript Playground 43 | 44 | {blocks.map((block, i) => ( 45 | 46 | ))} 47 | 50 | 51 | ); 52 | }; 53 | 54 | export default App; 55 | -------------------------------------------------------------------------------- /packages/web/src/BlockCodeMirrorEditor.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import {Controlled as CodeMirror} from 'react-codemirror2' 3 | import { initialCode } from './initialCode'; 4 | 5 | require('codemirror/mode/javascript/javascript'); 6 | require('codemirror/mode/markdown/markdown'); 7 | 8 | export const BlockCodeMirrorEditor = () => { 9 | const [code, setCode] = useState(initialCode); 10 | 11 | const options = { 12 | mode: 'javascript', 13 | theme: 'material', 14 | lineNumbers: true, 15 | }; 16 | 17 | return ( 18 | { 22 | setCode(value); 23 | }} 24 | onChange={(editor, data, value) => { 25 | }} 26 | /> 27 | ); 28 | }; 29 | -------------------------------------------------------------------------------- /packages/web/src/BlockMonacoCodeEditor.tsx: -------------------------------------------------------------------------------- 1 | import MonacoEditor from 'react-monaco-editor'; 2 | import React, { useEffect, useRef, useState } from 'react'; 3 | // eslint-disable-next-line 4 | import * as monaco from 'monaco-editor'; 5 | 6 | type BlockMonacoCodeEditorProps = { 7 | code: string; 8 | setCode: (code: string) => void; 9 | }; 10 | export const BlockMonacoCodeEditor = ({ 11 | code, 12 | setCode, 13 | }: BlockMonacoCodeEditorProps) => { 14 | const editorRef = useRef(); 15 | // eslint-disable-next-line 16 | const [height, setHeight] = useState(20 * 5); 17 | const [isMounted, setIsMounted] = useState(false); 18 | 19 | const options = { 20 | selectOnLineNumbers: true, 21 | automaticLayout: true, 22 | readOnly: false, 23 | scrollBeyondLastLine: false, 24 | scrollbar: { 25 | vertical: 'hidden', 26 | horizontal: 'hidden', 27 | }, 28 | } as monacoEditor.editor.IEditorConstructionOptions; 29 | 30 | // TODO - fix auto height 31 | const updateHeight = () => { 32 | // eslint-disable-next-line 33 | const contentHeight = Math.min(300, editorRef.current.getContentHeight()); 34 | 35 | // setHeight(contentHeight); 36 | 37 | // const width = '100%'; 38 | 39 | // editorRef.current.layout({ 40 | // // width, 41 | // height: contentHeight, 42 | // }); 43 | }; 44 | 45 | const editorDidMount = editor => { 46 | editorRef.current = editor; 47 | setIsMounted(true); 48 | }; 49 | 50 | useEffect(() => { 51 | if (isMounted) { 52 | editorRef.current.onDidContentSizeChange(updateHeight); 53 | } 54 | }, [isMounted]); 55 | 56 | return ( 57 | setCode(newValue)} 65 | editorDidMount={editorDidMount} 66 | /> 67 | ); 68 | }; 69 | -------------------------------------------------------------------------------- /packages/web/src/BlockSimpleCodeEditor.tsx: -------------------------------------------------------------------------------- 1 | import 'prismjs' 2 | import React, { useState } from 'react'; 3 | import 'prismjs/components/prism-javascript'; 4 | import 'prismjs/components/prism-jsx'; 5 | import { highlight, languages } from 'prismjs/components/prism-core'; 6 | import Editor from 'react-simple-code-editor'; 7 | import { initialCode } from './initialCode'; 8 | 9 | export const BlockSimpleCodeEditor = () => { 10 | const [code, setCode] = useState(initialCode); 11 | 12 | return ( 13 | setCode(code)} 16 | highlight={code => highlight(code, languages.js)} 17 | padding={10} 18 | style={{ 19 | fontFamily: '"Fira code", "Fira Mono", monospace', 20 | fontSize: 12, 21 | }} 22 | /> 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /packages/web/src/Root.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CssBaseline from '@material-ui/core/CssBaseline'; 3 | import { createMuiTheme } from '@material-ui/core/styles'; 4 | import { ThemeProvider, createGlobalStyle } from 'styled-components'; 5 | import { 6 | StylesProvider, 7 | ThemeProvider as MuiThemeProvider, 8 | } from '@material-ui/styles'; 9 | 10 | import App from './App'; 11 | 12 | const theme = createMuiTheme(); 13 | 14 | const GlobalStyle = createGlobalStyle` 15 | body { 16 | font-family: "Roboto", "Helvetica", "Arial", sans-serif; 17 | line-height: 1.5; 18 | color: #566b78; 19 | } 20 | h2 { 21 | margin-top: 1em; 22 | padding-top: 1em; 23 | } 24 | h1, 25 | h2, 26 | strong { 27 | color: #333; 28 | } 29 | span { 30 | font-size: 14px; 31 | } 32 | p { 33 | font-size: 14px; 34 | } 35 | `; 36 | 37 | const Root = () => { 38 | return ( 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ); 49 | }; 50 | 51 | export default Root; 52 | -------------------------------------------------------------------------------- /packages/web/src/RunnableBlockCode.tsx: -------------------------------------------------------------------------------- 1 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; 2 | import React, { useState, useRef, useEffect } from 'react'; 3 | import styled from 'styled-components'; 4 | import { Button } from '@material-ui/core'; 5 | import { space } from 'styled-system'; 6 | import { ErrorBoundary } from 'react-error-boundary'; 7 | 8 | import { useDebouncedCallback } from 'use-debounce'; 9 | 10 | import { BlockMonacoCodeEditor } from './BlockMonacoCodeEditor'; 11 | import { initialCode } from './initialCode'; 12 | import { createLiveEditor } from './createLiveEditor'; 13 | 14 | const RunButton = styled(Button)` 15 | color: green; 16 | ${space} 17 | `; 18 | 19 | const Result = styled.div` 20 | background: #f9f8f7; 21 | border: solid 1px #e8e5e8; 22 | padding: 5px; 23 | `; 24 | 25 | const Wrapper = styled.div` 26 | margin-bottom: 10px; 27 | `; 28 | 29 | const Preview = styled.div` 30 | &:last-child { 31 | border-top: solid 1px #ccc; 32 | border-right: solid 1px #ccc; 33 | border-bottom: solid 1px #ccc; 34 | } 35 | &:empty:before { 36 | content: 'Nothing to render'; 37 | color: rgba(0, 0, 0, 0.3); 38 | } 39 | `; 40 | 41 | const RedSpan = styled.span` 42 | color: red; 43 | `; 44 | 45 | const PreviewError = () => { 46 | return React Preview Error; 47 | }; 48 | 49 | const RunnableBlockCode = () => { 50 | const [code, setCode] = useState(initialCode); 51 | const [codeResult, setCodeResult] = useState(null); 52 | 53 | const previewRef = useRef(); 54 | const editorRef = useRef(); 55 | 56 | const evalBlock = () => { 57 | try { 58 | const fn = new Function(code); 59 | 60 | const result = fn(); 61 | 62 | // eslint-disable-next-line 63 | console.log({ 64 | fn, 65 | fnS: fn.toString(), 66 | result, 67 | }) 68 | } catch (err) { 69 | // eslint-disable-next-line 70 | console.log('new Function err: ', err); 71 | } 72 | 73 | try { 74 | const result = eval(code); 75 | 76 | setCodeResult(result); 77 | } catch (err) { 78 | setCodeResult(err.toString()); 79 | } 80 | }; 81 | 82 | useEffect(() => { 83 | editorRef.current = createLiveEditor(previewRef.current); 84 | }, []); 85 | 86 | const [run] = useDebouncedCallback(code => { 87 | editorRef.current.run(code); 88 | }); 89 | 90 | const onCodeChange = newCode => { 91 | setCode(newCode); 92 | 93 | run(newCode); 94 | }; 95 | 96 | return ( 97 | 98 | 99 | 100 | 101 | Run 102 | 103 | {!!codeResult && ( 104 | 105 |

Eval

106 | {codeResult} 107 | 108 | )} 109 | 110 | Preview 111 | 112 | 113 | 114 | ); 115 | }; 116 | 117 | export default RunnableBlockCode; 118 | -------------------------------------------------------------------------------- /packages/web/src/config.tsx: -------------------------------------------------------------------------------- 1 | const config = {}; 2 | 3 | export default config; 4 | -------------------------------------------------------------------------------- /packages/web/src/createLiveEditor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import ObjPath from 'object-path'; 4 | 5 | import * as Acorn from 'acorn'; 6 | 7 | import { generate as generateJs } from 'escodegen'; 8 | import { transform as babelTransform } from '@babel/standalone'; 9 | 10 | // eslint-disable-next-line 11 | const sampleReactCode = `import x from 'x'; 12 | 13 | // edit this example 14 | 15 | function Greet() { 16 | return Hello World! 17 | } 18 | 19 | 20 | `; 21 | 22 | export const isReactNode = node => { 23 | const type = node.type; //"ExpressionStatement" 24 | const obj = ObjPath.get(node, 'expression.callee.object.name'); 25 | const func = ObjPath.get(node, 'expression.callee.property.name'); 26 | return ( 27 | type === 'ExpressionStatement' && 28 | obj === 'React' && 29 | func === 'createElement' 30 | ); 31 | }; 32 | 33 | export const findReactNode = ast => { 34 | const { body } = ast; 35 | return body.find(isReactNode); 36 | }; 37 | 38 | export const getWrapperCode = (code) => { 39 | try { 40 | // 1. transform code 41 | const tcode = babelTransform(code, { presets: [ 42 | 'es2015', 43 | 'react', 44 | ] }).code; 45 | 46 | // 2. get AST 47 | const ast = Acorn.parse(tcode, { 48 | sourceType: 'module', 49 | ecmaVersion: 2020, 50 | }); 51 | 52 | // 3. find React.createElement expression in the body of program 53 | const rnode = findReactNode(ast); 54 | 55 | if (rnode) { 56 | const nodeIndex = ast.body.indexOf(rnode); 57 | // 4. convert the React.createElement invocation to source and remove the trailing semicolon 58 | const createElSrc = generateJs(rnode).slice(0, -1); 59 | // 5. transform React.createElement(...) to render(React.createElement(...)), 60 | // where render is a callback passed from outside 61 | const renderCallAst = Acorn.parse(`render(${createElSrc})`).body[0]; 62 | 63 | ast.body[nodeIndex] = renderCallAst; 64 | } 65 | 66 | return { 67 | ast, 68 | js: generateJs(ast), 69 | } 70 | } catch (err) { 71 | return { 72 | err: err.toString(), 73 | } 74 | } 75 | } 76 | 77 | export const createLiveEditor = (domElement, moduleResolver = () => null) => { 78 | const render = node => { 79 | ReactDOM.render(node, domElement); 80 | }; 81 | 82 | const require = moduleName => { 83 | return moduleResolver(moduleName); 84 | }; 85 | 86 | const getWrapperFunction = code => { 87 | try { 88 | // 1. transform code 89 | const tcode = babelTransform(code, { presets: [ 90 | 'es2015', 91 | 'react', 92 | ] }).code; 93 | 94 | // 2. get AST 95 | const ast = Acorn.parse(tcode, { 96 | sourceType: 'module', 97 | ecmaVersion: 2020, 98 | }); 99 | 100 | // 3. find React.createElement expression in the body of program 101 | const rnode = findReactNode(ast); 102 | 103 | if (rnode) { 104 | const nodeIndex = ast.body.indexOf(rnode); 105 | // 4. convert the React.createElement invocation to source and remove the trailing semicolon 106 | const createElSrc = generateJs(rnode).slice(0, -1); 107 | // 5. transform React.createElement(...) to render(React.createElement(...)), 108 | // where render is a callback passed from outside 109 | const renderCallAst = Acorn.parse(`render(${createElSrc})`).body[0]; 110 | 111 | ast.body[nodeIndex] = renderCallAst; 112 | } 113 | 114 | // 6. create a new wrapper function with all dependency as parameters 115 | return new Function('React', 'render', 'require', generateJs(ast)); 116 | } catch (ex) { 117 | // in case of exception render the exception message 118 | return () => render(
{ex.message}
); 119 | } 120 | }; 121 | 122 | const compile = code => { 123 | return getWrapperFunction(code); 124 | }; 125 | 126 | const run = code => { 127 | try { 128 | return compile(code)(React, render, require); 129 | } catch (err) { 130 | console.log('run failed: ', err); 131 | } 132 | }; 133 | 134 | const getCompiledCode = code => { 135 | return getWrapperFunction(code).toString(); 136 | }; 137 | 138 | return { 139 | compile, 140 | run, 141 | getCompiledCode, 142 | }; 143 | }; 144 | -------------------------------------------------------------------------------- /packages/web/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Playground 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/web/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'prismjs' 4 | 5 | import Root from './Root'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root'), 12 | ); 13 | -------------------------------------------------------------------------------- /packages/web/src/initialCode.tsx: -------------------------------------------------------------------------------- 1 | export const initialCode = `1 + 2`; 2 | -------------------------------------------------------------------------------- /packages/web/test/babel-transformer.js: -------------------------------------------------------------------------------- 1 | const config = require('@playground/babel'); 2 | 3 | const { createTransformer } = require('babel-jest'); 4 | 5 | module.exports = createTransformer({ 6 | ...config, 7 | }); 8 | -------------------------------------------------------------------------------- /packages/web/test/jest.setup.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom'; 2 | import '@testing-library/react/cleanup-after-each'; 3 | 4 | window.scrollTo = () => {}; 5 | 6 | jest.mock('../src/relay/Environment', () => { 7 | const { createMockEnvironment } = require('relay-test-utils'); 8 | 9 | return createMockEnvironment(); 10 | }); 11 | 12 | window.matchMedia = jest.fn().mockImplementation((query) => { 13 | return { 14 | matches: true, 15 | media: query, 16 | onchange: null, 17 | addListener: jest.fn(), // deprecated 18 | removeListener: jest.fn(), // deprecated 19 | addEventListener: jest.fn(), 20 | removeEventListener: jest.fn(), 21 | dispatchEvent: jest.fn(), 22 | }; 23 | }); 24 | -------------------------------------------------------------------------------- /packages/web/test/polyfill.js: -------------------------------------------------------------------------------- 1 | import 'raf/polyfill'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // Object.assign() is commonly used with React. 12 | // It will use the native implementation if it's present and isn't buggy. 13 | Object.assign = require('object-assign'); 14 | 15 | const fetch = require('isomorphic-fetch'); 16 | global.fetch = fetch; 17 | 18 | // localStorage mock 19 | const localStorageMock = (function () { 20 | let store = {}; 21 | return { 22 | getItem: function (key) { 23 | return store[key] || null; 24 | }, 25 | setItem: function (key, value) { 26 | store[key] = value.toString(); 27 | }, 28 | removeItem: function (key) { 29 | delete store[key]; 30 | }, 31 | clear: function () { 32 | store = {}; 33 | }, 34 | }; 35 | })(); 36 | global.localStorage = localStorageMock; 37 | -------------------------------------------------------------------------------- /packages/web/webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpackConfig = require('@playground/webpack'); 2 | 3 | module.exports = webpackConfig; 4 | -------------------------------------------------------------------------------- /packages/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@playground/webpack", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "css-loader": "3.6.0", 6 | "file-loader": "6.0.0", 7 | "style-loader": "1.2.1" 8 | }, 9 | "main": "src/webpackConfig.js" 10 | } 11 | -------------------------------------------------------------------------------- /packages/webpack/src/webpackConfig.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const dotEnv = require('dotenv-webpack'); 5 | const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); 6 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); 7 | 8 | const cwd = process.cwd(); 9 | 10 | const PORT = parseInt(process.env.PORT || '8222'); 11 | 12 | module.exports = { 13 | mode: 'development', 14 | devtool: 'cheap-module-source-map', 15 | context: path.resolve(cwd, './'), 16 | entry: ['./src/index.tsx'], 17 | output: { 18 | path: path.join(cwd, 'build'), 19 | publicPath: '/', 20 | pathinfo: false, 21 | // https://github.com/webpack/webpack/pull/8642 22 | futureEmitAssets: true, 23 | }, 24 | resolve: { 25 | extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'], 26 | }, 27 | module: { 28 | rules: [ 29 | { 30 | test: /\.(js|jsx|ts|tsx)?$/, 31 | exclude: [/node_modules/], 32 | use: ['babel-loader?cacheDirectory'], 33 | }, 34 | { 35 | test: /\.(jpe?g|png|gif|svg|pdf|csv|xlsx|ttf|woff(2)?)$/i, 36 | use: [ 37 | { 38 | loader: 'file-loader', 39 | options: { 40 | name: '[name].[ext]', 41 | outputPath: 'img/', 42 | }, 43 | }, 44 | ], 45 | }, 46 | { 47 | test: /\.css$/, 48 | use: ['style-loader', 'css-loader'], 49 | }, 50 | ], 51 | }, 52 | devServer: { 53 | contentBase: path.join(cwd, 'build'), 54 | disableHostCheck: true, 55 | historyApiFallback: { 56 | disableDotRule: true, 57 | }, 58 | hot: true, 59 | hotOnly: false, 60 | compress: true, 61 | open: true, 62 | port: PORT, 63 | }, 64 | plugins: [ 65 | new dotEnv({ 66 | path: './.env', 67 | safe: true, 68 | }), 69 | new ReactRefreshPlugin(), 70 | new HtmlWebpackPlugin({ 71 | template: './src/index.html', 72 | }), 73 | new MonacoWebpackPlugin({ 74 | languages: ['markdown', 'javascript', 'typescript', 'css', 'json', 'shell', 'html'], 75 | }), 76 | ], 77 | }; 78 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'all', 3 | singleQuote: true, 4 | }; 5 | -------------------------------------------------------------------------------- /test/customBabelTransformer.js: -------------------------------------------------------------------------------- 1 | const babelJest = require('babel-jest'); 2 | const entriaBabel = require('@playground/babel'); 3 | 4 | module.exports = babelJest.createTransformer(entriaBabel); 5 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "esnext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | "moduleResolution": "node", 7 | "lib": [ /* Specify library files to be included in the compilation. */ 8 | "esnext", 9 | "dom", 10 | "dom.iterable" 11 | ], 12 | // "allowJs": true, /* Allow javascript files to be compiled. */ 13 | // "checkJs": true, /* Report errors in .js files. */ 14 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 15 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 16 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 17 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 18 | // "outFile": "./", /* Concatenate and emit output to single file. */ 19 | "outDir": "./distTs", /* Redirect output structure to the directory. */ 20 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 21 | // "composite": true, /* Enable project compilation */ 22 | // "removeComments": true, /* Do not emit comments to output. */ 23 | "noEmit": true, /* Do not emit outputs. */ 24 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 25 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 26 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 27 | 28 | /* Strict Type-Checking Options */ 29 | "strict": true, /* Enable all strict type-checking options. */ 30 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 31 | // "strictNullChecks": true, /* Enable strict null checks. */ 32 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 36 | 37 | /* Additional Checks */ 38 | "noUnusedLocals": true, /* Report errors on unused locals. */ 39 | "noUnusedParameters": true, /* Report errors on unused parameters. */ 40 | "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 42 | 43 | /* Module Resolution Options */ 44 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 45 | "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 46 | "paths": { /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 47 | "@playground/babel": ["packages/babel"], 48 | "@playground/server": ["packages/server"], 49 | "@playground/web": ["packages/web"] 50 | }, 51 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 52 | // "typeRoots": [], /* List of folders to include type definitions from. */ 53 | // "types": [], /* Type declaration files to be included in compilation. */ 54 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 55 | "resolveJsonModule": true, 56 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 57 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 58 | 59 | /* Source Map Options */ 60 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 61 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 62 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 63 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 64 | 65 | /* Experimental Options */ 66 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 67 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 68 | "skipLibCheck": true 69 | } 70 | } 71 | --------------------------------------------------------------------------------