Add legacy app warning to all apps

homedocs/astro.config.mjs

@@ -10,6 +10,9 @@ import llmsTxt from "./src/integrations/llms-txt";
 // https://astro.build/config
 export default defineConfig({
   site: "https://cxjs.io",
+  redirects: {
+    "/docs": "/docs/intro/what-is-cxjs",
+  },
   integrations: [
     cxjs(),
     react(),

legacy/fiddle/app/components/CodeMirror.js

@@ -1,76 +1,79 @@
-import { Widget, VDOM, CSS } from 'cx/ui';
-import codemirror from 'codemirror';
+import { Widget, VDOM, CSS } from "cx/ui";
+import codemirror from "codemirror";
 import "codemirror/lib/codemirror.css";
 import "codemirror/mode/jsx/jsx";
 import "codemirror/mode/javascript/javascript";
 import "codemirror/mode/css/css";
 import "codemirror/addon/edit/matchtags";
 import "codemirror/addon/edit/closetag";
 
-
 export class CodeMirror extends Widget {
-
    declareData() {
       return super.declareData(...arguments, {
-         code: undefined
+         code: undefined,
       });
    }
 
    render(context, instance, key) {
-      return <Component key={key} instance={instance} data={instance.data} />
+      return <Component key={key} instance={instance} data={instance.data} />;
    }
 }
 
-CodeMirror.prototype.baseClass = 'codemirror';
+CodeMirror.prototype.baseClass = "codemirror";
 CodeMirror.prototype.styled = true;
 
 class Component extends VDOM.Component {
    render() {
-      var {data, widget} = this.props.instance;
-      return <div className={data.classNames} style={data.style}>
-         <textarea className={CSS.element(widget.baseClass, 'input')}
-                   defaultValue={data.code}
-                   ref="input"/>
-      </div>
+      var { data, widget } = this.props.instance;
+      return (
+         <div className={data.classNames} style={data.style}>
+            <textarea
+               className={CSS.element(widget.baseClass, "input")}
+               defaultValue={data.code}
+               ref={(el) => {
+                  this.input = el;
+               }}
+            />
+         </div>
+      );
    }
 
    shouldComponentUpdate() {
       return false;
    }
 
    componentDidMount() {
-      var {widget} = this.props.instance;
-      this.cm = codemirror.fromTextArea(this.refs.input, {
+      var { widget } = this.props.instance;
+      this.cm = codemirror.fromTextArea(this.input, {
          lineNumbers: true,
          mode: widget.mode,
          tabSize: 2,
-         matchTags: {bothTags: true},
+         matchTags: { bothTags: true },
          autoCloseTags: true,
          extraKeys: {
-            'Ctrl-R': ::this.save,
-            'Ctrl-S': ::this.save,
-            'Ctrl-I': ::this.resolveImport,
-         }
+            "Ctrl-R": this.save.bind(this),
+            "Ctrl-S": this.save.bind(this),
+            "Ctrl-I": this.resolveImport.bind(this),
+         },
       });
-      this.cm.on('blur', ::this.onBlur);
+      this.cm.on("blur", this.onBlur.bind(this));
    }
-   
-   componentWillReceiveProps(props) {
+
+   UNSAFE_componentWillReceiveProps(props) {
       if (props.data.code != this.cm.getValue())
-         this.cm.setValue(props.data.code || '');
+         this.cm.setValue(props.data.code || "");
    }
 
    save() {
-      var {widget, store} = this.props.instance;
+      var { widget, store } = this.props.instance;
       if (widget.nameMap.code) {
          var value = this.cm.getValue();
-         if (typeof value == 'string')
-            store.set(widget.nameMap.code, value);
+         if (typeof value == "string") store.set(widget.nameMap.code, value);
       }
    }
 
    resolveImport() {
-      var {widget} = this.props.instance;
+      var { widget } = this.props.instance;
       var selection = this.cm.getSelection();
       if (selection && widget.onImportName) {
          var code = widget.onImportName(this.cm.getValue(), selection);
@@ -83,4 +86,4 @@ class Component extends VDOM.Component {
    }
 }
 
-CodeMirror.prototype.mode = 'javascript';
+CodeMirror.prototype.mode = "javascript";

legacy/fiddle/app/components/CodeMirror.scss

@@ -9,7 +9,3 @@
       box-sizing: border-box;
    }
 }
-
-.cxe-codemirror-input {
-   @include cxe-field-input($cx-besm, $cx-input-state-style-map);
-}

legacy/fiddle/app/components/Preview.js

@@ -4,13 +4,27 @@ import { Store } from "cx/data";
 import deepEqual from "deep-equal";
 import casualData from "app/components/casual";
 
-import * as Cx from "cx/index";
+import * as CxUI from "cx/ui";
+import * as CxWidgets from "cx/widgets";
+import * as CxData from "cx/data";
+import * as CxUtil from "cx/util";
+import * as CxSVG from "cx/svg";
+import * as CxCharts from "cx/charts";
+
+const Cx = {
+   ui: CxUI,
+   widgets: CxWidgets,
+   data: CxData,
+   util: CxUtil,
+   svg: CxSVG,
+   charts: CxCharts,
+};
 
 export class Preview extends HtmlElement {
    declareData() {
       super.declareData(...arguments, {
          js: undefined,
-         data: undefined
+         data: undefined,
       });
    }
 
@@ -26,7 +40,11 @@ class PreviewComponent extends VDOM.Component {
       var { data } = this.props.instance;
       return (
          <div className={data.classNames} style={data.style}>
-            <div ref="el" />
+            <div
+               ref={(el) => {
+                  this.el = el;
+               }}
+            />
          </div>
       );
    }
@@ -53,8 +71,8 @@ class PreviewComponent extends VDOM.Component {
    getReportableData() {
       var data = { ...this.store.getData() };
       Object.keys(data)
-         .filter(k => k[0] == "$")
-         .forEach(k => delete data[k]);
+         .filter((k) => k[0] == "$")
+         .forEach((k) => delete data[k]);
       return data;
    }
 
@@ -103,7 +121,7 @@ class PreviewComponent extends VDOM.Component {
             break;
          }
 
-         this.stop = startAppLoop(this.refs.el, store, preview);
+         this.stop = startAppLoop(this.el, store, preview);
       } catch (e) {
          console.log(e);
          preview = (
@@ -120,8 +138,7 @@ class PreviewComponent extends VDOM.Component {
             </cx>
          );
 
-      if (!this.stop)
-         this.stop = startAppLoop(this.refs.el, this.store, preview);
+      if (!this.stop) this.stop = startAppLoop(this.el, this.store, preview);
    }
 
    componentWillUnmount() {
@@ -134,7 +151,7 @@ class PreviewComponent extends VDOM.Component {
 Preview.prototype.baseClass = "preview";
 
 function transformImports(code) {
-   return code.replace(/require\(('|").*('|")\)/g, match => {
+   return code.replace(/require\(('|").*('|")\)/g, (match) => {
       return match.substring(9, match.length - 2).replace(/\//g, ".");
    });
 }

legacy/fiddle/app/components/icons.js

@@ -1,8 +1,8 @@
-import { VDOM } from 'cx/ui';
-import { Icon } from 'cx/widgets';
+import { VDOM } from "cx/ui";
+import { Icon } from "cx/widgets";
 
-Icon.registerFactory((name, props) => {
-    props = { ...props };
-    props.className = `fa fa-${name} ${props.className || ''}`;
-    return <i {...props} />
+Icon.registerFactory((name, { key, ...props }) => {
+   props = { ...props };
+   props.className = `fa fa-${name} ${props.className || ""}`;
+   return <i key={key} {...props} />;
 });

legacy/fiddle/app/components/index.scss

@@ -1,4 +1,4 @@
-@import "OpenDialog";
-@import "CodeMirror";
-@import "Preview";
-@import "toolbar";
+@use "OpenDialog" as open-dialog;
+@use "CodeMirror" as codemirror;
+@use "Preview" as preview;
+@use "toolbar" as toolbar;

legacy/fiddle/app/core/addImports.js

@@ -1,4 +1,11 @@
-import * as Cx from 'cx';
+import * as CxUI from "cx/ui";
+import * as CxWidgets from "cx/widgets";
+import * as CxData from "cx/data";
+import * as CxUtil from "cx/util";
+import * as CxSVG from "cx/svg";
+import * as CxCharts from "cx/charts";
+
+const Cx = { ui: CxUI, widgets: CxWidgets, data: CxData, util: CxUtil, svg: CxSVG, charts: CxCharts };
 import { rewriteImports, getImportedNames } from './groupImports';
 //let Cx = {};
 

legacy/fiddle/app/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -21,14 +21,18 @@
       rel="stylesheet"
       type="text/css"
     />
-    <%= htmlWebpackPlugin.options.reactScripts %>    
   </head>
   <body>
-    <%= htmlWebpackPlugin.files.webpackManifest %>
     <div id="app"></div>
     <%= htmlWebpackPlugin.options.gtmb %>
 
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/standalone.min.js" async></script>
-    <script src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/parser-babel.js" async></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/standalone.min.js"
+      async
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/prettier@2.6.0/parser-babel.js"
+      async
+    ></script>
   </body>
 </html>

legacy/fiddle/app/index.scss

@@ -1,4 +1,18 @@
-@use "sass:math";
+// Forward variables first so downstream @use picks them up
+@forward "./variables";
+
+// Load misc styles
+@use "../../misc/layout/index" as misc-layout;
+@use "../../misc/components/index" as misc-components;
+
+// Load theme (use overrides to avoid double-config of variables)
+@use "cx-theme-aquamarine/src/overrides.scss" as theme;
+
+// Load fiddle styles
+@use "components/index" as components;
+@use "routes/login/index" as login;
+@use "routes/default/index" as default-route;
+@use "routes/preview/index" as preview;
 
 html {
    height: 100%;
@@ -19,24 +33,6 @@ a {
    text-decoration: none;
 }
 
-@import "../../misc/layout";
-@import "../../misc/components";
-
-$cx-theme-primary-color: $master-theme-color;
-
-@import "~cx-theme-aquamarine/src/variables.scss";
-
-@function cx-divide($a, $b) {
-   @return math.div($a, $b);
-}
-
-@import "~cx-theme-aquamarine/src/index.scss";
-
-@import "components/index";
-@import "routes/login/index";
-@import "routes/default/index";
-@import "routes/preview/index";
-
 .cxb-submenu {
    .cxb-menu {
       min-width: 150px;

legacy/fiddle/app/routes/default/Controller.js

@@ -6,7 +6,7 @@ import { reformatCode } from "app/core/reformatCode";
 import { createFiddle, updateFiddle, deleteFiddle } from "app/api/fiddles";
 import { openOpenDialog } from "app/components/OpenDialog";
 
-import Route from "route-parser";
+import Route from "route-parser-ts";
 import { getToken } from "app/api/token";
 import { getFiddle } from "app/api/fiddles";
 import { getFiddleStar } from "app/api/stars";

legacy/fiddle/app/routes/default/index.scss

@@ -1,3 +1,5 @@
+@use "../../../../misc/layout/variables" as *;
+
 $header-line-height: 20px;
 $header-padding: 0px;
 $toolbar-height: 20px;
@@ -9,7 +11,7 @@ $toolbar-height: 20px;
    flex-direction: column;
 
    .master_header ~ & {
-      padding-top: $master-header-height;
+      padding-top: $master-header-height + $master-banner-height;
    }
 
    & > header {

legacy/fiddle/app/routes/index.js

@@ -2,32 +2,32 @@ import {
    Route,
    HtmlElement,
    PureContainer,
-   enableAllInternalDependencies
+   enableAllInternalDependencies,
 } from "cx/widgets";
-import {FirstVisibleChildLayout} from "cx/ui";
+import { FirstVisibleChildLayout } from "cx/ui";
 import Default from "./default/";
 import Preview from "./preview/";
-import {WaitScreen} from "./login/";
-import {PickAuthProviderPage} from "./login/PickAuthProviderPage";
+import { WaitScreen } from "./login/";
+import { PickAuthProviderPage } from "./login/PickAuthProviderPage";
 
 enableAllInternalDependencies();
 
 export const App = (
    <cx>
-      <PureContainer layout={FirstVisibleChildLayout}>
+      <FirstVisibleChildLayout>
          <Route route="~/?login=1" url:bind="url">
-            <PickAuthProviderPage/>
+            <PickAuthProviderPage />
          </Route>
          <Route route="~/?auth(*splat)" url:bind="url">
-            <WaitScreen/>
+            <WaitScreen />
          </Route>
          <Route route="~/?p=:f" url:bind="url" params:bind="qs">
-            <Preview/>
+            <Preview />
          </Route>
          <Route route="~/?f=:f" url:bind="url" params:bind="qs">
-            <Default/>
+            <Default />
          </Route>
-         <Default/>
-      </PureContainer>
+         <Default />
+      </FirstVisibleChildLayout>
    </cx>
 );