From b22aea7375e7459a87c02e6f1d2d902aee9ed7db Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Fri, 23 Mar 2018 14:37:15 +0100 Subject: [PATCH 01/21] Add CxJS template UI --- .editorconfig | 4 + .../src/app/components/NewSandbox/index.js | 10 +++ packages/app/src/sandbox/eval/index.js | 4 + .../src/sandbox/eval/presets/cxjs/index.js | 82 +++++++++++++++++++ packages/common/components/logos/CxJS.js | 5 ++ packages/common/components/logos/cxjs.svg | 1 + .../templates/configuration/babelrc/index.js | 32 ++++++++ packages/common/templates/cxjs.js | 36 ++++++++ packages/common/templates/index.js | 6 +- packages/common/utils/url-generator.js | 1 + .../src/screens/home/Animation/index.js | 3 +- 11 files changed, 182 insertions(+), 2 deletions(-) create mode 100644 .editorconfig create mode 100644 packages/app/src/sandbox/eval/presets/cxjs/index.js create mode 100644 packages/common/components/logos/CxJS.js create mode 100644 packages/common/components/logos/cxjs.svg create mode 100644 packages/common/templates/cxjs.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..39789b11d5e --- /dev/null +++ b/.editorconfig @@ -0,0 +1,4 @@ +[*.js] +indent_style = space +indent_size = 2 +end_of_line = lf diff --git a/packages/app/src/app/components/NewSandbox/index.js b/packages/app/src/app/components/NewSandbox/index.js index 67afb62a3ec..1a40911fc3d 100644 --- a/packages/app/src/app/components/NewSandbox/index.js +++ b/packages/app/src/app/components/NewSandbox/index.js @@ -11,6 +11,7 @@ import { newVueSandboxUrl, newAngularSandboxUrl, newSvelteSandboxUrl, + newCxJSSandboxUrl, importFromGitHubUrl, uploadFromCliUrl, } from 'common/utils/url-generator'; @@ -21,6 +22,7 @@ import ParcelIcon from 'common/components/logos/Parcel'; import VueIcon from 'common/components/logos/Vue'; import SvelteIcon from 'common/components/logos/Svelte'; import AngularIcon from 'common/components/logos/Angular'; +import CxJSIcon from 'common/components/logos/CxJS'; import { Container, @@ -104,6 +106,14 @@ function NewSandbox({ signals }) { href={newReactTypeScriptSandboxUrl()} onClick={() => signals.modalClosed()} /> + signals.closeModal()} + /> /\.jsx?$/.test(module.path), [ + { + transpiler: babelTranspiler, + options: { + dynamicCSSModules: true, + }, + }, + ]); + + cxjsPreset.registerTranspiler(module => /\.tsx?$/.test(module.path), [ + { transpiler: tsTranspiler }, + ]); + + cxjsPreset.registerTranspiler(module => /\.css$/.test(module.path), [ + { transpiler: stylesTranspiler }, + ]); + + cxjsPreset.registerTranspiler(module => /\.json$/.test(module.path), [ + { transpiler: jsonTranspiler }, + ]); + + const sassWithConfig = { + transpiler: sassTranspiler, + options: {}, + }; + + const lessWithConfig = { + transpiler: lessTranspiler, + options: {}, + }; + + const stylusWithConfig = { + transpiler: stylusTranspiler, + options: {}, + }; + const styles = { + css: [], + scss: [sassWithConfig], + sass: [sassWithConfig], + less: [lessWithConfig], + styl: [stylusWithConfig], + }; + + /** + * Registers transpilers for all different combinations + * + * @returns + */ + function registerStyleTranspilers() { + return Object.keys(styles).forEach(type => { + cxjsPreset.registerTranspiler( + module => new RegExp(`\\.${type}`).test(module.path), + [...styles[type], { transpiler: stylesTranspiler }] + ); + }); + } + + registerStyleTranspilers(); + + cxjsPreset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); + + return cxjsPreset; +} diff --git a/packages/common/components/logos/CxJS.js b/packages/common/components/logos/CxJS.js new file mode 100644 index 00000000000..2ee2f131736 --- /dev/null +++ b/packages/common/components/logos/CxJS.js @@ -0,0 +1,5 @@ +import React from 'react'; + +import cxjs from './cxjs.svg'; + +export default props => cxjs; diff --git a/packages/common/components/logos/cxjs.svg b/packages/common/components/logos/cxjs.svg new file mode 100644 index 00000000000..df3e67bd064 --- /dev/null +++ b/packages/common/components/logos/cxjs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/common/templates/configuration/babelrc/index.js b/packages/common/templates/configuration/babelrc/index.js index 1ef07c2f012..686a547b1c6 100644 --- a/packages/common/templates/configuration/babelrc/index.js +++ b/packages/common/templates/configuration/babelrc/index.js @@ -102,6 +102,38 @@ const config: ConfigurationFile = { return JSON.stringify({ presets, plugins }, null, 2); } + if (template === 'cxjs') { + return JSON.stringify( + { + presets: [ + [ + 'cx-env', + { + targets: { + chrome: 50, + ie: 11, + ff: 30, + edge: 12, + safari: 9, + }, + modules: false, + loose: true, + useBuiltIns: true, + cx: { + imports: { + useSrc: true, + }, + }, + }, + ], + ], + plugins: [], + }, + null, + 2 + ); + } + return JSON.stringify({ presets: [], plugins: [] }, null, 2); }, diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js new file mode 100644 index 00000000000..9cd1d84d15a --- /dev/null +++ b/packages/common/templates/cxjs.js @@ -0,0 +1,36 @@ +// @flow + +import CxJSIcon from 'common/components/logos/CxJS'; +import Template from './template'; +import { decorateSelector } from '../theme'; +import configurations from './configuration'; + +class CxJSTemplate extends Template { + getEntries() { + const entries = []; + + entries.push('/src/index.js'); + entries.push('/app/index.js'); + + return entries; + } +} + +export default new CxJSTemplate( + 'cxjs', + 'CxJS', + 'https://cxjs.io/', + 'cxjs', + CxJSIcon, + decorateSelector(() => '#11689f'), + { + showOnHomePage: true, + showCube: false, + extraConfigurations: { + '/.babelrc': configurations.babelrc, + '/tsconfig.json': configurations.tsconfig, + }, + externalResourcesEnabled: false, + distDir: 'dist', + } +); diff --git a/packages/common/templates/index.js b/packages/common/templates/index.js index fc0d7dc18ad..cd06b07a003 100644 --- a/packages/common/templates/index.js +++ b/packages/common/templates/index.js @@ -7,8 +7,9 @@ import react from './react'; import reactTs from './react-ts'; import svelte from './svelte'; import vue from './vue'; +import cxjs from './cxjs'; -export { angular, babel, vue, react, reactTs, preact, svelte, parcel }; +export { angular, babel, vue, react, reactTs, preact, svelte, parcel, cxjs }; export default function getDefinition( theme: @@ -19,6 +20,7 @@ export default function getDefinition( | 'create-react-app-typescript' | 'angular-cli' | 'parcel' + | 'cxjs' ) { switch (theme) { case react.name: @@ -37,6 +39,8 @@ export default function getDefinition( return parcel; case babel.name: return babel; + case cxjs.name: + return cxjs; default: return react; } diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js index f2254b6c09f..9ca36a3b78a 100644 --- a/packages/common/utils/url-generator.js +++ b/packages/common/utils/url-generator.js @@ -32,6 +32,7 @@ export const newVueSandboxUrl = () => `/s/vue`; export const importFromGitHubUrl = () => `/s/github`; export const newSvelteSandboxUrl = () => `/s/svelte`; export const newAngularSandboxUrl = () => `/s/angular`; +export const newCxJSSandboxUrl = () => `/s/cxjs`; export const uploadFromCliUrl = () => `/s/cli`; const sandboxGitUrl = (git: { diff --git a/packages/homepage/src/screens/home/Animation/index.js b/packages/homepage/src/screens/home/Animation/index.js index 820b716d68e..e478298d205 100644 --- a/packages/homepage/src/screens/home/Animation/index.js +++ b/packages/homepage/src/screens/home/Animation/index.js @@ -14,6 +14,7 @@ import { preact, svelte, parcel, + cxjs, } from 'common/templates'; import Background from './Background'; @@ -64,7 +65,7 @@ const Message = styled.div` `}; `; -const TEMPLATES = [parcel, react, vue, angular, preact, reactTs, svelte]; +const TEMPLATES = [parcel, react, vue, angular, preact, reactTs, svelte, cxjs]; export default class Animation extends React.PureComponent { state = { From 596741e633648a79c599bacb2ebd7faaf647be00 Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Fri, 30 Mar 2018 15:02:22 +0200 Subject: [PATCH 02/21] Configure Babel for CxJS template --- packages/app/package.json | 2 ++ packages/app/src/sandbox/eval/presets/cxjs/index.js | 2 +- .../common/templates/configuration/babelrc/index.js | 12 +++++------- packages/common/templates/cxjs.js | 9 ++++----- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index c9c5e94879c..06e223ad98c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -106,6 +106,7 @@ "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-system-import": "^1.1.5", "babel-plugin-system-import-transformer": "3.1.0", + "babel-plugin-transform-cx-jsx": "^17.12.0", "babel-plugin-transform-async-to-generator": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-remove-strict-mode": "^0.0.2", @@ -183,6 +184,7 @@ "react-split-pane": "^0.1.74", "react-stripe-elements": "^1.2.0", "react-tagsinput": "^3.19.0", + "sharp": "^0.20.1", "shelljs": "^0.7.8", "store": "^2.0.12", "string-replace-loader": "^1.3.0", diff --git a/packages/app/src/sandbox/eval/presets/cxjs/index.js b/packages/app/src/sandbox/eval/presets/cxjs/index.js index 83902690832..dfd6e85339f 100644 --- a/packages/app/src/sandbox/eval/presets/cxjs/index.js +++ b/packages/app/src/sandbox/eval/presets/cxjs/index.js @@ -14,7 +14,7 @@ export default function initialize() { 'cxjs', ['js', 'jsx', 'ts', 'tsx', 'json', 'less', 'scss', 'sass', 'styl', 'css'], {}, - { htmlDisabled: true } + {} ); cxjsPreset.registerTranspiler(module => /\.jsx?$/.test(module.path), [ diff --git a/packages/common/templates/configuration/babelrc/index.js b/packages/common/templates/configuration/babelrc/index.js index 686a547b1c6..7bb48634121 100644 --- a/packages/common/templates/configuration/babelrc/index.js +++ b/packages/common/templates/configuration/babelrc/index.js @@ -107,7 +107,7 @@ const config: ConfigurationFile = { { presets: [ [ - 'cx-env', + 'env', { targets: { chrome: 50, @@ -119,15 +119,13 @@ const config: ConfigurationFile = { modules: false, loose: true, useBuiltIns: true, - cx: { - imports: { - useSrc: true, - }, - }, }, ], ], - plugins: [], + plugins: [ + ['transform-cx-jsx'], + ['transform-react-jsx', { pragma: 'VDOM.createElement' }], + ], }, null, 2 diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js index 9cd1d84d15a..12651215cf7 100644 --- a/packages/common/templates/cxjs.js +++ b/packages/common/templates/cxjs.js @@ -7,12 +7,11 @@ import configurations from './configuration'; class CxJSTemplate extends Template { getEntries() { - const entries = []; - - entries.push('/src/index.js'); - entries.push('/app/index.js'); + return ['/app/index.js', '/src/index.js', '/index.html']; + } - return entries; + getHTMLEntries() { + return ['/app/index.html', '/src/index.html', '/index.html']; } } From bb2141c561f94ea69f9c1d5cc41ded526d4ded46 Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Sun, 1 Apr 2018 06:33:39 +0200 Subject: [PATCH 03/21] Load transform-cx-jsx on demand --- .../sandbox/eval/transpilers/babel/worker/babel-worker.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js b/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js index 600db7461df..25a7ffdff77 100644 --- a/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js +++ b/packages/app/src/sandbox/eval/transpilers/babel/worker/babel-worker.js @@ -265,6 +265,14 @@ self.addEventListener('message', async event => { ) { const pragmaticPlugin = await import(/* webpackChunkName: 'babel-plugin-jsx-pragmatic' */ 'babel-plugin-jsx-pragmatic'); Babel.registerPlugin('jsx-pragmatic', pragmaticPlugin); + } + + if ( + flattenedPlugins.indexOf('transform-cx-jsx') > -1 && + Object.keys(Babel.availablePlugins).indexOf('transform-cx-jsx') === -1 + ) { + const cxJsxPlugin = await import(/* webpackChunkName: 'transform-cx-jsx' */ 'babel-plugin-transform-cx-jsx'); + Babel.registerPlugin('transform-cx-jsx', cxJsxPlugin); } } From 28f812dd8d5cb6dee1736dc9a6af27ee85a61ad9 Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Sun, 1 Apr 2018 06:58:58 +0200 Subject: [PATCH 04/21] Removing direct sharp dependency --- packages/app/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/app/package.json b/packages/app/package.json index 06e223ad98c..d616a7c0d0e 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -184,7 +184,6 @@ "react-split-pane": "^0.1.74", "react-stripe-elements": "^1.2.0", "react-tagsinput": "^3.19.0", - "sharp": "^0.20.1", "shelljs": "^0.7.8", "store": "^2.0.12", "string-replace-loader": "^1.3.0", From f0bb40d144a880d4b72265f88bfeb1a872007f22 Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Sun, 1 Apr 2018 13:09:26 +0200 Subject: [PATCH 05/21] Update CxJS template --- packages/common/templates/cxjs.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js index 12651215cf7..3e8f58a1cb0 100644 --- a/packages/common/templates/cxjs.js +++ b/packages/common/templates/cxjs.js @@ -1,6 +1,5 @@ // @flow -import CxJSIcon from 'common/components/logos/CxJS'; import Template from './template'; import { decorateSelector } from '../theme'; import configurations from './configuration'; @@ -20,7 +19,6 @@ export default new CxJSTemplate( 'CxJS', 'https://cxjs.io/', 'cxjs', - CxJSIcon, decorateSelector(() => '#11689f'), { showOnHomePage: true, From d072541f94c47fe490ca2912c4fdb12f2fd9adc0 Mon Sep 17 00:00:00 2001 From: Nick Nisi Date: Mon, 15 Jan 2018 19:55:26 -0600 Subject: [PATCH 06/21] add Dojo 2 as a preset template - add dojo2 template - add temporary project as template to load (github) - add type definition creation to styles transpiler - add dojo 2 to home page - add default loading of dojo template src/index.html and src/main.css --- .../app/components/CodeEditor/Monaco/index.js | 15 +++ .../src/app/components/NewSandbox/index.js | 10 ++ packages/app/src/sandbox/eval/index.js | 4 + .../src/sandbox/eval/presets/dojo/index.js | 49 ++++++++ .../sandbox/eval/transpilers/style/index.js | 7 ++ packages/common/components/logos/Dojo.js | 107 ++++++++++++++++++ packages/common/templates/dojo.js | 29 +++++ packages/common/templates/index.js | 6 +- packages/common/types.js | 1 + packages/common/utils/url-generator.js | 1 + .../src/screens/home/Animation/Background.js | 1 + .../src/screens/home/Animation/index.js | 3 +- .../src/screens/home/Frameworks/index.js | 5 + 13 files changed, 236 insertions(+), 2 deletions(-) create mode 100644 packages/app/src/sandbox/eval/presets/dojo/index.js create mode 100644 packages/common/components/logos/Dojo.js create mode 100644 packages/common/templates/dojo.js diff --git a/packages/app/src/app/components/CodeEditor/Monaco/index.js b/packages/app/src/app/components/CodeEditor/Monaco/index.js index 47ae7df66ca..31532e06c3a 100644 --- a/packages/app/src/app/components/CodeEditor/Monaco/index.js +++ b/packages/app/src/app/components/CodeEditor/Monaco/index.js @@ -4,6 +4,7 @@ import { TextOperation } from 'ot'; import { debounce } from 'lodash'; import { getModulePath } from 'common/sandbox/modules'; import { css } from 'glamor'; +import { listen } from 'codesandbox-api'; import getTemplate from 'common/templates'; import type { @@ -158,6 +159,8 @@ class MonacoEditor extends React.Component implements Editor { this.onSelectionChangedDebounced, 500 ); + + this.setupTranspilationListener(); } shouldComponentUpdate(nextProps: Props) { @@ -199,6 +202,18 @@ class MonacoEditor extends React.Component implements Editor { } } + setupTranspilationListener() { + listen(({ type, code, path }) => { + if (type === 'add-extra-lib') { + const dtsPath = `${path}.d.ts`; + this.monaco.languages.typescript.typescriptDefaults._extraLibs[ + `file:///${dtsPath}` + ] = code; + this.commitLibChanges(); + } + }); + } + configureEditor = async (editor: any, monaco: any) => { this.editor = editor; this.monaco = monaco; diff --git a/packages/app/src/app/components/NewSandbox/index.js b/packages/app/src/app/components/NewSandbox/index.js index 67afb62a3ec..61d36e00656 100644 --- a/packages/app/src/app/components/NewSandbox/index.js +++ b/packages/app/src/app/components/NewSandbox/index.js @@ -10,6 +10,7 @@ import { newPreactSandboxUrl, newVueSandboxUrl, newAngularSandboxUrl, + newDojoSandboxUrl, newSvelteSandboxUrl, importFromGitHubUrl, uploadFromCliUrl, @@ -21,6 +22,7 @@ import ParcelIcon from 'common/components/logos/Parcel'; import VueIcon from 'common/components/logos/Vue'; import SvelteIcon from 'common/components/logos/Svelte'; import AngularIcon from 'common/components/logos/Angular'; +import DojoIcon from 'common/components/logos/Dojo'; import { Container, @@ -80,6 +82,14 @@ function NewSandbox({ signals }) { href={newAngularSandboxUrl()} onClick={() => signals.modalClosed()} /> + signals.closeModal()} + /> { + const stylesPath = absolute(join('src', 'main.css')) + const tModule = await manager.resolveTranspiledModuleAsync(stylesPath, '/'); + await tModule.transpile(manager); + tModule.setIsEntry(true); + tModule.evaluate(manager); + } + } + ); + + preset.registerTranspiler(module => /\.tsx?$/.test(module.path), [ + { transpiler: typescriptTranspiler }, + ]); + + preset.registerTranspiler(module => /\.jsx?$/.test(module.path), [ + { transpiler: babelTranspiler }, + ]); + + preset.registerTranspiler(module => /\.json$/.test(module.path), [ + { transpiler: jsonTranspiler }, + ]); + + preset.registerTranspiler(module => /\.m\.css$/.test(module.path), [ + { transpiler: stylesTranspiler, options: { module: true } }, + ]); + + preset.registerTranspiler(module => /\.css$/.test(module.path), [ + { transpiler: stylesTranspiler }, + ]); + + preset.registerTranspiler(() => true, [{ transpiler: rawTranspiler }]); + + return preset; +} diff --git a/packages/app/src/sandbox/eval/transpilers/style/index.js b/packages/app/src/sandbox/eval/transpilers/style/index.js index ec2a999d69f..958c2153f03 100644 --- a/packages/app/src/sandbox/eval/transpilers/style/index.js +++ b/packages/app/src/sandbox/eval/transpilers/style/index.js @@ -1,4 +1,5 @@ // @flow +import { dispatch } from 'codesandbox-api'; import Transpiler from '../'; import { type LoaderContext } from '../../transpiled-module'; @@ -7,6 +8,10 @@ import getModules from './get-modules'; const getStyleId = id => id + '-css'; // eslint-disable-line +function classesToDefinition(classes): string { + return Object.keys(classes).reduce((previous, className) => previous + `export const ${className}: string;\n`, ''); +} + class StyleTranspiler extends Transpiler { constructor() { super('style-loader'); @@ -24,12 +29,14 @@ class StyleTranspiler extends Transpiler { doTranspilation(code: string, loaderContext: LoaderContext) { const id = getStyleId(loaderContext._module.getId()); + const { path } = loaderContext; if (loaderContext.options.module) { return getModules(code, loaderContext).then(({ css, exportTokens }) => { let result = insertCss(id, css); result += `\nmodule.exports=${JSON.stringify(exportTokens)};`; + dispatch({ type: 'add-extra-lib', path, code: classesToDefinition(exportTokens) }); return Promise.resolve({ transpiledCode: result }); }); } diff --git a/packages/common/components/logos/Dojo.js b/packages/common/components/logos/Dojo.js new file mode 100644 index 00000000000..58bf2e700a6 --- /dev/null +++ b/packages/common/components/logos/Dojo.js @@ -0,0 +1,107 @@ +import React from 'react'; + +export default ({ + width = 35, + height = 35, + className +}: { + width: number, + height: number, + className: ?string +}) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/packages/common/templates/dojo.js b/packages/common/templates/dojo.js new file mode 100644 index 00000000000..1f14b0c1a62 --- /dev/null +++ b/packages/common/templates/dojo.js @@ -0,0 +1,29 @@ +// @flow + +// import configurations from './configuration'; +import DojoIcon from 'common/components/logos/Dojo'; +import Template from './template'; +import { decorateSelector } from '../theme'; + +export class DojoTemplate extends Template { + // eslint-disable-next-line no-unused-vars + getHTMLEntries(configurationFiles: { [type: string]: Object }): Array { + return ['/src/index.html']; + } + + getEntries(configurationFiles: { [type: string]: Object }) { + const entries = super.getEntries(configurationFiles); + entries.push('/src/main.ts'); + return entries; + } +} + +export default new DojoTemplate( + '@dojo/cli-create-app', + 'Dojo 2', + 'https://github.com/dojo/cli-create-app', + 'dojo2', + DojoIcon, + decorateSelector(() => '#D3471C'), + { showOnHomePage: true } +); diff --git a/packages/common/templates/index.js b/packages/common/templates/index.js index fc0d7dc18ad..318fc9c0ca4 100644 --- a/packages/common/templates/index.js +++ b/packages/common/templates/index.js @@ -7,8 +7,9 @@ import react from './react'; import reactTs from './react-ts'; import svelte from './svelte'; import vue from './vue'; +import dojo from './dojo'; -export { angular, babel, vue, react, reactTs, preact, svelte, parcel }; +export { angular, babel, vue, react, reactTs, preact, svelte, parcel, dojo }; export default function getDefinition( theme: @@ -19,6 +20,7 @@ export default function getDefinition( | 'create-react-app-typescript' | 'angular-cli' | 'parcel' + | '@dojo/cli-create-app' ) { switch (theme) { case react.name: @@ -37,6 +39,8 @@ export default function getDefinition( return parcel; case babel.name: return babel; + case dojo.name: + return dojo; default: return react; } diff --git a/packages/common/types.js b/packages/common/types.js index f3aef22f36b..887d787f50c 100644 --- a/packages/common/types.js +++ b/packages/common/types.js @@ -140,6 +140,7 @@ export type Sandbox = { | 'create-react-app' | 'create-react-app-typescript' | 'angular-cli' + | '@dojo/cli-create-app' | 'vue-cli' | 'preact-cli' | 'svelte', diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js index f2254b6c09f..45a7407a8f6 100644 --- a/packages/common/utils/url-generator.js +++ b/packages/common/utils/url-generator.js @@ -27,6 +27,7 @@ export const newSandboxWizard = () => `/s`; export const newSandboxUrl = () => `/s/new`; export const parcelSandboxUrl = () => `/s/vanilla`; export const newReactTypeScriptSandboxUrl = () => `/s/react-ts`; +export const newDojoSandboxUrl = () => `/s/github/nicknisi/dojo2-app`; export const newPreactSandboxUrl = () => `/s/preact`; export const newVueSandboxUrl = () => `/s/vue`; export const importFromGitHubUrl = () => `/s/github`; diff --git a/packages/homepage/src/screens/home/Animation/Background.js b/packages/homepage/src/screens/home/Animation/Background.js index f470db888f0..1c63056afc5 100644 --- a/packages/homepage/src/screens/home/Animation/Background.js +++ b/packages/homepage/src/screens/home/Animation/Background.js @@ -28,6 +28,7 @@ export default class Background extends React.PureComponent { // Use solid colors for perf colors = { 'create-react-app': '#1E2428', + '@dojo/cli-create-app': '#211D1C', 'vue-cli': '#1D2525', 'preact-cli': '#202328', svelte: '#202022', diff --git a/packages/homepage/src/screens/home/Animation/index.js b/packages/homepage/src/screens/home/Animation/index.js index 820b716d68e..e9ecc871de7 100644 --- a/packages/homepage/src/screens/home/Animation/index.js +++ b/packages/homepage/src/screens/home/Animation/index.js @@ -14,6 +14,7 @@ import { preact, svelte, parcel, + dojo } from 'common/templates'; import Background from './Background'; @@ -64,7 +65,7 @@ const Message = styled.div` `}; `; -const TEMPLATES = [parcel, react, vue, angular, preact, reactTs, svelte]; +const TEMPLATES = [parcel, react, vue, angular, preact, reactTs, svelte, dojo]; export default class Animation extends React.PureComponent { state = { diff --git a/packages/homepage/src/screens/home/Frameworks/index.js b/packages/homepage/src/screens/home/Frameworks/index.js index c3ac2d569b9..9d4c62e83b0 100644 --- a/packages/homepage/src/screens/home/Frameworks/index.js +++ b/packages/homepage/src/screens/home/Frameworks/index.js @@ -207,6 +207,11 @@ const TEMPLATE_SUPPORT = { css: ['Global'], description: 'Used for React projects, based on: ', }, + '@dojo/cli-create-app': { + loaders: [ts, html, cssGlobal, image ], + css: [ 'Global', 'Scoped', 'Modules' ], + description: 'Used for Dojo 2 projects, based on: ' + }, 'vue-cli': { loaders: [ js, From 9f9b64799828001d8a013632eeb84304498af674 Mon Sep 17 00:00:00 2001 From: Nick Nisi Date: Mon, 26 Mar 2018 20:30:46 -0500 Subject: [PATCH 07/21] change dojo template url to dojo codesandbox repo --- packages/common/utils/url-generator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js index 45a7407a8f6..fa7523de313 100644 --- a/packages/common/utils/url-generator.js +++ b/packages/common/utils/url-generator.js @@ -27,7 +27,7 @@ export const newSandboxWizard = () => `/s`; export const newSandboxUrl = () => `/s/new`; export const parcelSandboxUrl = () => `/s/vanilla`; export const newReactTypeScriptSandboxUrl = () => `/s/react-ts`; -export const newDojoSandboxUrl = () => `/s/github/nicknisi/dojo2-app`; +export const newDojoSandboxUrl = () => `/s/github/dojo/dojo-codesandbox-template`; export const newPreactSandboxUrl = () => `/s/preact`; export const newVueSandboxUrl = () => `/s/vue`; export const importFromGitHubUrl = () => `/s/github`; From dfda94db651d31d2478190e042c9d7f25613e526 Mon Sep 17 00:00:00 2001 From: Nick Nisi Date: Tue, 27 Mar 2018 07:13:01 -0500 Subject: [PATCH 08/21] add in temporary API override -- REMOVE COMMIT --- packages/app/src/app/store/providers/Api.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/app/src/app/store/providers/Api.js b/packages/app/src/app/store/providers/Api.js index 35248ccb2b2..db410a04f3e 100644 --- a/packages/app/src/app/store/providers/Api.js +++ b/packages/app/src/app/store/providers/Api.js @@ -78,6 +78,7 @@ function handleResponse(response, { shouldCamelize = true } = {}) { camelizedData.data.npmDependencies = response.result.data.npm_dependencies; } + camelizedData.data.template = '@dojo/cli-create-app'; return camelizedData.data ? camelizedData.data : camelizedData; } From 16cdb459b51d1396f72704601ed88860a6f0bca0 Mon Sep 17 00:00:00 2001 From: Nick Nisi Date: Mon, 2 Apr 2018 22:15:18 -0500 Subject: [PATCH 09/21] set isTypeScript to true for dojo template --- packages/common/templates/dojo.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/common/templates/dojo.js b/packages/common/templates/dojo.js index 1f14b0c1a62..81de9006c46 100644 --- a/packages/common/templates/dojo.js +++ b/packages/common/templates/dojo.js @@ -25,5 +25,5 @@ export default new DojoTemplate( 'dojo2', DojoIcon, decorateSelector(() => '#D3471C'), - { showOnHomePage: true } + { showOnHomePage: true, isTypeScript: true } ); From f5b88bdb2faa3c2c85b7a1aa94606883c0473067 Mon Sep 17 00:00:00 2001 From: Nick Nisi Date: Mon, 2 Apr 2018 22:34:08 -0500 Subject: [PATCH 10/21] remove DojoIcon from dojo template definition --- packages/common/templates/dojo.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/common/templates/dojo.js b/packages/common/templates/dojo.js index 81de9006c46..7a9d1825241 100644 --- a/packages/common/templates/dojo.js +++ b/packages/common/templates/dojo.js @@ -1,7 +1,5 @@ // @flow -// import configurations from './configuration'; -import DojoIcon from 'common/components/logos/Dojo'; import Template from './template'; import { decorateSelector } from '../theme'; @@ -23,7 +21,6 @@ export default new DojoTemplate( 'Dojo 2', 'https://github.com/dojo/cli-create-app', 'dojo2', - DojoIcon, decorateSelector(() => '#D3471C'), { showOnHomePage: true, isTypeScript: true } ); From 8eec5db5f4116af46af12a76e5a2348356310e28 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 10:45:08 +0200 Subject: [PATCH 11/21] Don't throw error for cxjs if main.css is not found --- .../src/sandbox/eval/presets/dojo/index.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/packages/app/src/sandbox/eval/presets/dojo/index.js b/packages/app/src/sandbox/eval/presets/dojo/index.js index 4d2df26c957..a0b89a3c661 100644 --- a/packages/app/src/sandbox/eval/presets/dojo/index.js +++ b/packages/app/src/sandbox/eval/presets/dojo/index.js @@ -7,6 +7,8 @@ import jsonTranspiler from '../../transpilers/json'; import stylesTranspiler from '../../transpilers/style'; import babelTranspiler from '../../transpilers/babel'; +import ModuleNotFoundError from '../../../errors/module-not-found-error'; + export default function initialize() { const preset = new Preset( '@dojo/cli-create-app', @@ -15,13 +17,21 @@ export default function initialize() { { setup: async manager => { const stylesPath = absolute(join('src', 'main.css')); - const tModule = await manager.resolveTranspiledModuleAsync( - stylesPath, - '/' - ); - await tModule.transpile(manager); - tModule.setIsEntry(true); - tModule.evaluate(manager); + try { + const tModule = await manager.resolveTranspiledModuleAsync( + stylesPath, + '/' + ); + await tModule.transpile(manager); + tModule.setIsEntry(true); + tModule.evaluate(manager); + } catch (e) { + if (e instanceof ModuleNotFoundError) { + // Do nothing + } else { + throw e; + } + } }, } ); From a1b123332f2ff775a14801959bbc5d78152f801b Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 13:01:37 +0200 Subject: [PATCH 12/21] Remove force of Dojo --- packages/app/src/app/store/providers/Api.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/app/src/app/store/providers/Api.js b/packages/app/src/app/store/providers/Api.js index db410a04f3e..35248ccb2b2 100644 --- a/packages/app/src/app/store/providers/Api.js +++ b/packages/app/src/app/store/providers/Api.js @@ -78,7 +78,6 @@ function handleResponse(response, { shouldCamelize = true } = {}) { camelizedData.data.npmDependencies = response.result.data.npm_dependencies; } - camelizedData.data.template = '@dojo/cli-create-app'; return camelizedData.data ? camelizedData.data : camelizedData; } From 5fee627a29189690e9977b93450a4b5a30321b5e Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 13:01:43 +0200 Subject: [PATCH 13/21] Fix check --- packages/app/src/sandbox/eval/presets/dojo/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/app/src/sandbox/eval/presets/dojo/index.js b/packages/app/src/sandbox/eval/presets/dojo/index.js index a0b89a3c661..d382099e453 100644 --- a/packages/app/src/sandbox/eval/presets/dojo/index.js +++ b/packages/app/src/sandbox/eval/presets/dojo/index.js @@ -7,8 +7,6 @@ import jsonTranspiler from '../../transpilers/json'; import stylesTranspiler from '../../transpilers/style'; import babelTranspiler from '../../transpilers/babel'; -import ModuleNotFoundError from '../../../errors/module-not-found-error'; - export default function initialize() { const preset = new Preset( '@dojo/cli-create-app', @@ -26,7 +24,7 @@ export default function initialize() { tModule.setIsEntry(true); tModule.evaluate(manager); } catch (e) { - if (e instanceof ModuleNotFoundError) { + if (e.type === 'module-not-found') { // Do nothing } else { throw e; From d4f9619bdeab383e6947e21440d062ac26314be5 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 13:29:08 +0200 Subject: [PATCH 14/21] Update URLs --- packages/common/templates/cxjs.js | 2 +- packages/common/templates/dojo.js | 2 +- packages/common/utils/url-generator.js | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js index 3e8f58a1cb0..3be14478181 100644 --- a/packages/common/templates/cxjs.js +++ b/packages/common/templates/cxjs.js @@ -18,7 +18,7 @@ export default new CxJSTemplate( 'cxjs', 'CxJS', 'https://cxjs.io/', - 'cxjs', + 'github/codaxy/cxjs-codesandbox-template', decorateSelector(() => '#11689f'), { showOnHomePage: true, diff --git a/packages/common/templates/dojo.js b/packages/common/templates/dojo.js index 2293f2edc3e..56eaae35656 100644 --- a/packages/common/templates/dojo.js +++ b/packages/common/templates/dojo.js @@ -22,7 +22,7 @@ export default new DojoTemplate( '@dojo/cli-create-app', 'Dojo 2', 'https://github.com/dojo/cli-create-app', - 'dojo2', + 'github/dojo/dojo-codesandbox-template', decorateSelector(() => '#D3471C'), { showOnHomePage: true, isTypeScript: true } ); diff --git a/packages/common/utils/url-generator.js b/packages/common/utils/url-generator.js index 93991da627f..61cf8b5c938 100644 --- a/packages/common/utils/url-generator.js +++ b/packages/common/utils/url-generator.js @@ -34,7 +34,8 @@ export const newVueSandboxUrl = () => `/s/vue`; export const importFromGitHubUrl = () => `/s/github`; export const newSvelteSandboxUrl = () => `/s/svelte`; export const newAngularSandboxUrl = () => `/s/angular`; -export const newCxJSSandboxUrl = () => `/s/cxjs`; +export const newCxJSSandboxUrl = () => + `/s/github/codaxy/cxjs-codesandbox-template`; export const uploadFromCliUrl = () => `/s/cli`; const sandboxGitUrl = (git: { From 5f32827efff1455616a37d57534443f35421d041 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 13:36:37 +0200 Subject: [PATCH 15/21] Add CxJS to homepage --- packages/homepage/src/screens/home/Frameworks/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/homepage/src/screens/home/Frameworks/index.js b/packages/homepage/src/screens/home/Frameworks/index.js index 024794014e7..5c84e842cb5 100644 --- a/packages/homepage/src/screens/home/Frameworks/index.js +++ b/packages/homepage/src/screens/home/Frameworks/index.js @@ -212,6 +212,11 @@ const TEMPLATE_SUPPORT = { css: ['Global', 'Scoped', 'Modules'], description: 'Used for Dojo 2 projects, based on: ', }, + cxjs: { + loaders: [ts, html, cssGlobal, scss, sass, less, stylus, image], + css: ['Global', 'Scoped', 'Modules'], + description: 'Used for CxJS projects, based on: ', + }, 'vue-cli': { loaders: [ js, From 4195705781f9377dfaa4c8e5b534176ba186b245 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Mon, 23 Apr 2018 15:37:30 +0200 Subject: [PATCH 16/21] update yarn.lock --- yarn.lock | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/yarn.lock b/yarn.lock index e4040698d26..aaa4123def7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2121,6 +2121,12 @@ babel-plugin-transform-class-properties@6.24.1, babel-plugin-transform-class-pro babel-runtime "^6.22.0" babel-template "^6.24.1" +babel-plugin-transform-cx-jsx@^17.12.0: + version "17.12.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-cx-jsx/-/babel-plugin-transform-cx-jsx-17.12.0.tgz#a023e1c40e54f5cd8da5efc5cfeab3caa9e27695" + dependencies: + babel-plugin-syntax-jsx "^6.18.0" + babel-plugin-transform-decorators-legacy@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.4.tgz#741b58f6c5bce9e6027e0882d9c994f04f366925" From 3bb2997dda1dcbf22abd46a923f79173c67391a5 Mon Sep 17 00:00:00 2001 From: Marko Stijak Date: Wed, 25 Apr 2018 11:58:23 +0200 Subject: [PATCH 17/21] Add CxJS cube to the homepage and fix CxJS and Dojo icons (#751) --- packages/common/templates/cxjs.js | 1 - packages/common/templates/icons.js | 20 +++++++++++++++++++- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/common/templates/cxjs.js b/packages/common/templates/cxjs.js index 3be14478181..07ee5352163 100644 --- a/packages/common/templates/cxjs.js +++ b/packages/common/templates/cxjs.js @@ -22,7 +22,6 @@ export default new CxJSTemplate( decorateSelector(() => '#11689f'), { showOnHomePage: true, - showCube: false, extraConfigurations: { '/.babelrc': configurations.babelrc, '/tsconfig.json': configurations.tsconfig, diff --git a/packages/common/templates/icons.js b/packages/common/templates/icons.js index e69fe31e75c..f2298c4f03a 100644 --- a/packages/common/templates/icons.js +++ b/packages/common/templates/icons.js @@ -6,8 +6,20 @@ import Parcel from 'common/components/logos/Parcel'; import Preact from 'common/components/logos/Preact'; import Vue from 'common/components/logos/Vue'; import Svelte from 'common/components/logos/Svelte'; +import Dojo from 'common/components/logos/Dojo'; +import CxJS from 'common/components/logos/CxJS'; -import { react, vue, preact, reactTs, svelte, angular, parcel } from './'; +import { + react, + vue, + preact, + reactTs, + svelte, + angular, + parcel, + dojo, + cxjs, +} from './'; export default function getIcon( theme: @@ -18,6 +30,8 @@ export default function getIcon( | 'create-react-app-typescript' | 'angular-cli' | 'parcel' + | 'dojo' + | 'cxjs' ) { switch (theme) { case react.name: @@ -34,6 +48,10 @@ export default function getIcon( return Angular; case parcel.name: return Parcel; + case dojo.name: + return Dojo; + case cxjs.name: + return CxJS; default: return React; } From 8817a446a603a7346d019e02866a9bc38617f4b1 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Wed, 25 Apr 2018 13:04:28 +0200 Subject: [PATCH 18/21] Force build From da7b74cc4fe984e2851ce530f844b8f3e668e0f2 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Wed, 25 Apr 2018 15:06:07 +0200 Subject: [PATCH 19/21] Change logo order for consistency with homepage --- .../src/app/components/NewSandbox/index.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/app/src/app/components/NewSandbox/index.js b/packages/app/src/app/components/NewSandbox/index.js index 78cdae3882d..b2439c8c936 100644 --- a/packages/app/src/app/components/NewSandbox/index.js +++ b/packages/app/src/app/components/NewSandbox/index.js @@ -57,7 +57,6 @@ function NewSandbox({ signals }) { href={parcelSandboxUrl()} onClick={() => signals.modalClosed()} /> - signals.modalClosed()} /> - signals.modalClosed()} /> - signals.modalClosed()} /> - signals.closeModal()} - /> signals.modalClosed()} /> + signals.closeModal()} + /> Date: Wed, 25 Apr 2018 15:07:33 +0200 Subject: [PATCH 20/21] Clean up transpilation listener on unmount --- .../app/src/app/components/CodeEditor/Monaco/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/app/src/app/components/CodeEditor/Monaco/index.js b/packages/app/src/app/components/CodeEditor/Monaco/index.js index da537996f96..1e79db852b9 100644 --- a/packages/app/src/app/components/CodeEditor/Monaco/index.js +++ b/packages/app/src/app/components/CodeEditor/Monaco/index.js @@ -135,6 +135,7 @@ class MonacoEditor extends React.Component implements Editor { editor: any; monaco: any; receivingCode: ?boolean = false; + transpilationListener: ?Function; constructor(props: Props) { super(props); @@ -160,7 +161,7 @@ class MonacoEditor extends React.Component implements Editor { 500 ); - this.setupTranspilationListener(); + this.transpilationListener = this.setupTranspilationListener(); } shouldComponentUpdate(nextProps: Props) { @@ -194,6 +195,9 @@ class MonacoEditor extends React.Component implements Editor { if (this.typingsFetcherWorker) { this.typingsFetcherWorker.terminate(); } + if (this.transpilationListener) { + this.transpilationListener(); + } clearTimeout(this.sizeProbeInterval); }); @@ -203,7 +207,7 @@ class MonacoEditor extends React.Component implements Editor { } setupTranspilationListener() { - listen(({ type, code, path }) => { + return listen(({ type, code, path }) => { if (type === 'add-extra-lib') { const dtsPath = `${path}.d.ts`; this.monaco.languages.typescript.typescriptDefaults._extraLibs[ From 59ac5de615b64a119967acd424110315a9084d31 Mon Sep 17 00:00:00 2001 From: Ives van Hoorne Date: Wed, 25 Apr 2018 15:17:36 +0200 Subject: [PATCH 21/21] Add to changelog --- .../content/changelog/2018-04-25-dojo-and-cxjs-templates.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md diff --git a/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md b/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md new file mode 100644 index 00000000000..755868db215 --- /dev/null +++ b/packages/homepage/content/changelog/2018-04-25-dojo-and-cxjs-templates.md @@ -0,0 +1,6 @@ +--- +title: "Dojo 2 and CxJS templates" +authors: ["nicknisi", "mstijak"] +--- + +Not one, but two new templates have been added to CodeSandbox! The templates are [Dojo](https://dojo.io/) and [CxJS](https://cxjs.io/). These implementations are completely built by @nicknisi and @mstijak. A huge thanks for their effort!