CxJS template

.editorconfig

@@ -0,0 +1,4 @@
+[*.js]
+indent_style = space
+indent_size = 2
+end_of_line = lf

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",

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()}
         />
+        <Logo
+          Icon={CxJSIcon}
+          width={50}
+          height={50}
+          text="CxJS"
+          href={newCxJSSandboxUrl()}
+          onClick={() => signals.closeModal()}
+        />
         <Logo
           Icon={GithubIcon}
           width={50}

packages/app/src/sandbox/eval/index.js

@@ -7,6 +7,7 @@ import {
   preact,
   reactTs,
   angular,
+  cxjs,
   babel,
 } from 'common/templates';
 
@@ -18,6 +19,7 @@ import sveltePreset from './presets/svelte';
 import angularPreset from './presets/angular-cli';
 import parcelPreset from './presets/parcel';
 import babelPreset from './presets/babel-repl';
+import cxjsPreset from './presets/cxjs';
 
 export default function getPreset(template: string) {
   switch (template) {
@@ -37,6 +39,8 @@ export default function getPreset(template: string) {
       return parcelPreset();
     case babel.name:
       return babelPreset();
+    case cxjs.name:
+      return cxjsPreset();
     default:
       return reactPreset();
   }

packages/app/src/sandbox/eval/presets/cxjs/index.js

@@ -0,0 +1,82 @@
+import babelTranspiler from '../../transpilers/babel';
+import jsonTranspiler from '../../transpilers/json';
+import stylesTranspiler from '../../transpilers/style';
+import sassTranspiler from '../../transpilers/sass';
+import rawTranspiler from '../../transpilers/raw';
+import stylusTranspiler from '../../transpilers/stylus';
+import lessTranspiler from '../../transpilers/less';
+import tsTranspiler from '../../transpilers/typescript';
+
+import Preset from '../';
+
+export default function initialize() {
+  const cxjsPreset = new Preset(
+    'cxjs',
+    ['js', 'jsx', 'ts', 'tsx', 'json', 'less', 'scss', 'sass', 'styl', 'css'],
+    {},
+    {}
+  );
+
+  cxjsPreset.registerTranspiler(module => /\.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;
+}

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);
     }
   }
 

packages/common/components/logos/CxJS.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import cxjs from './cxjs.svg';
+
+export default props => <img alt="cxjs" src={cxjs} {...props} />;

packages/common/templates/configuration/babelrc/index.js

@@ -102,6 +102,36 @@ const config: ConfigurationFile = {
       return JSON.stringify({ presets, plugins }, null, 2);
     }
 
+    if (template === 'cxjs') {
+      return JSON.stringify(
+        {
+          presets: [
+            [
+              'env',
+              {
+                targets: {
+                  chrome: 50,
+                  ie: 11,
+                  ff: 30,
+                  edge: 12,
+                  safari: 9,
+                },
+                modules: false,
+                loose: true,
+                useBuiltIns: true,
+              },
+            ],
+          ],
+          plugins: [
+            ['transform-cx-jsx'],
+            ['transform-react-jsx', { pragma: 'VDOM.createElement' }],
+          ],
+        },
+        null,
+        2
+      );
+    }
+
     return JSON.stringify({ presets: [], plugins: [] }, null, 2);
   },
 

packages/common/templates/cxjs.js

@@ -0,0 +1,33 @@
+// @flow
+
+import Template from './template';
+import { decorateSelector } from '../theme';
+import configurations from './configuration';
+
+class CxJSTemplate extends Template {
+  getEntries() {
+    return ['/app/index.js', '/src/index.js', '/index.html'];
+  }
+
+  getHTMLEntries() {
+    return ['/app/index.html', '/src/index.html', '/index.html'];
+  }
+}
+
+export default new CxJSTemplate(
+  'cxjs',
+  'CxJS',
+  'https://cxjs.io/',
+  'cxjs',
+  decorateSelector(() => '#11689f'),
+  {
+    showOnHomePage: true,
+    showCube: false,
+    extraConfigurations: {
+      '/.babelrc': configurations.babelrc,
+      '/tsconfig.json': configurations.tsconfig,
+    },
+    externalResourcesEnabled: false,
+    distDir: 'dist',
+  }
+);

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;
   }

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: {

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 = {