Support JupyterLite

.github/workflows/build.yml

@@ -195,3 +195,65 @@ jobs:
       - uses: actions/checkout@v3
       - uses: jupyterlab/maintainer-tools/.github/actions/base-setup@v1
       - uses: jupyterlab/maintainer-tools/.github/actions/check-links@v1
+
+  build-lite:
+    name: Build JupyterLite
+    needs: integration-tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Conda environment with Micromamba
+        uses: mamba-org/setup-micromamba@v1
+        with:
+          micromamba-version: '1.5.5-0'
+          environment-name: build-env
+          create-args: >-
+            python=3.10
+            pip
+            jupyterlite-core>=0.2.0,<0.3.0
+            jupyterlite-xeus>=0.1.2,<0.2
+
+      - name: Download extension package
+        uses: actions/download-artifact@v3
+        with:
+          name: extension-artifacts
+
+      - name: Install the extension
+        shell: bash -l {0}
+        run: |
+          set -eux
+          cp ./jupytercad_core/dist/jupytercad*.whl ./jupytercad_lab/dist/jupytercad*.whl ./jupytercad_app/dist/jupytercad*.whl .
+          python -m pip install jupytercad*.whl
+
+      - name: Build the lite site
+        shell: bash -l {0}
+        working-directory: lite
+        run: |
+          set -eux
+          mkdir -p content && cp ../examples/test.jcad ./content
+          jupyter lite build --contents content --output-dir dist
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./lite/dist
+
+  deploy:
+    needs: build-lite
+    if: github.ref == 'refs/heads/main'
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

examples/test.jcad

@@ -97,9 +97,7 @@
       }
     }
   ],
-  "options": {
-    "foo": 1
-  },
+  "options": {},
   "metadata": {},
   "outputs": {}
 }

lite/environment.yml

@@ -0,0 +1,6 @@
+name: xeus-python-kernel
+channels:
+  - https://repo.mamba.pm/emscripten-forge
+  - conda-forge
+dependencies:
+  - xeus-python

lite/jupyter-lite.json

@@ -0,0 +1,7 @@
+{
+  "jupyter-lite-schema-version": 0,
+  "jupyter-config-data": {
+    "appName": "My JupyterCAD App",
+    "disabledExtensions": ["@jupyter/collaboration-extension"]
+  }
+}

packages/base/src/mainview.tsx

@@ -796,17 +796,17 @@ export class MainView extends React.Component<IProps, IStates> {
     }
   }
 
-  private _createPointer(user: User.IIdentity): BasicMesh {
+  private _createPointer(user?: User.IIdentity): BasicMesh {
     let clientColor: Color.RGBColor | null = null;
 
-    if (user.color?.startsWith('var')) {
+    if (user?.color?.startsWith('var')) {
       clientColor = Color.color(
         getComputedStyle(document.documentElement).getPropertyValue(
           user.color.slice(4, -1)
         )
       ) as Color.RGBColor;
     } else {
-      clientColor = Color.color(user.color) as Color.RGBColor;
+      clientColor = Color.color(user?.color ?? 'steelblue') as Color.RGBColor;
     }
 
     const material = new THREE.MeshBasicMaterial({

packages/schema/src/doc.ts

@@ -0,0 +1,248 @@
+import { MapChange, YDocument } from '@jupyter/ydoc';
+import { JSONExt, JSONObject } from '@lumino/coreutils';
+import { ISignal, Signal } from '@lumino/signaling';
+import * as Y from 'yjs';
+
+import { IJCadObject, IJCadOptions } from './_interface/jcad';
+import {
+  IDict,
+  IJcadObjectDocChange,
+  IJupyterCadDoc,
+  IJupyterCadDocChange,
+  IPostResult
+} from './interfaces';
+
+export class JupyterCadDoc
+  extends YDocument<IJupyterCadDocChange>
+  implements IJupyterCadDoc
+{
+  constructor() {
+    super();
+
+    this._options = this.ydoc.getMap<Y.Map<any>>('options');
+    this._objects = this.ydoc.getArray<Y.Map<any>>('objects');
+    this._metadata = this.ydoc.getMap<string>('metadata');
+    this._outputs = this.ydoc.getMap<IPostResult>('outputs');
+    this.undoManager.addToScope(this._objects);
+
+    this._objects.observeDeep(this._objectsObserver);
+    this._metadata.observe(this._metaObserver);
+    this._options.observe(this._optionsObserver);
+  }
+
+  dispose(): void {
+    super.dispose();
+  }
+
+  get version(): string {
+    return '0.1.0';
+  }
+
+  get objects(): Array<IJCadObject> {
+    const objs = this._objects.map(
+      obj => JSONExt.deepCopy(obj.toJSON()) as IJCadObject
+    );
+    return objs;
+  }
+
+  get options(): JSONObject {
+    return JSONExt.deepCopy(this._options.toJSON());
+  }
+
+  get metadata(): JSONObject {
+    return JSONExt.deepCopy(this._metadata.toJSON());
+  }
+
+  get outputs(): JSONObject {
+    return JSONExt.deepCopy(this._outputs.toJSON());
+  }
+
+  get objectsChanged(): ISignal<IJupyterCadDoc, IJcadObjectDocChange> {
+    return this._objectsChanged;
+  }
+
+  get optionsChanged(): ISignal<IJupyterCadDoc, MapChange> {
+    return this._optionsChanged;
+  }
+
+  get metadataChanged(): ISignal<IJupyterCadDoc, MapChange> {
+    return this._metadataChanged;
+  }
+
+  objectExists(name: string): boolean {
+    return Boolean(this._getObjectAsYMapByName(name));
+  }
+
+  getObjectByName(name: string): IJCadObject | undefined {
+    const obj = this._getObjectAsYMapByName(name);
+    if (obj) {
+      return JSONExt.deepCopy(obj.toJSON()) as IJCadObject;
+    }
+    return undefined;
+  }
+
+  removeObjectByName(name: string): void {
+    let index = 0;
+    for (const obj of this._objects) {
+      if (obj.get('name') === name) {
+        break;
+      }
+      index++;
+    }
+
+    if (this._objects.length > index) {
+      this.transact(() => {
+        this._objects.delete(index);
+        const guidata = this.getOption('guidata');
+        if (guidata) {
+          delete guidata[name];
+          this.setOption('guidata', guidata);
+        }
+        this.removeOutput(name);
+      });
+    }
+  }
+
+  addObject(value: IJCadObject): void {
+    this.addObjects([value]);
+  }
+
+  addObjects(value: Array<IJCadObject>): void {
+    this.transact(() => {
+      value.map(obj => {
+        if (!this.objectExists(obj.name)) {
+          this._objects.push([new Y.Map(Object.entries(obj))]);
+        } else {
+          console.error('There is already an object with the name:', obj.name);
+        }
+      });
+    });
+  }
+
+  updateObjectByName(name: string, key: string, value: any): void {
+    const obj = this._getObjectAsYMapByName(name);
+    if (!obj) {
+      return;
+    }
+    this.transact(() => obj.set(key, value));
+  }
+
+  getOption(key: keyof IJCadOptions): IDict | undefined {
+    const content = this._options.get(key);
+    if (!content) {
+      return;
+    }
+    return JSONExt.deepCopy(content) as IDict;
+  }
+
+  setOption(key: keyof IJCadOptions, value: IDict): void {
+    this.transact(() => void this._options.set(key, value));
+  }
+
+  setOptions(options: IJCadOptions): void {
+    this.transact(() => {
+      for (const [key, value] of Object.entries(options)) {
+        this._options.set(key, value);
+      }
+    });
+  }
+
+  getMetadata(key: string): string | undefined {
+    return this._metadata.get(key);
+  }
+
+  setMetadata(key: string, value: string): void {
+    this.transact(() => void this._metadata.set(key, value));
+  }
+
+  removeMetadata(key: string): void {
+    if (this._metadata.has(key)) {
+      this._metadata.delete(key);
+    }
+  }
+
+  getOutput(key: string): IPostResult | undefined {
+    return this._outputs.get(key);
+  }
+
+  setOutput(key: string, value: IPostResult): void {
+    this.transact(() => void this._outputs.set(key, value));
+  }
+
+  removeOutput(key: string): void {
+    if (this._outputs.has(key)) {
+      this._outputs.delete(key);
+    }
+  }
+
+  setShapeMeta(name: string, meta?: IDict): void {
+    const obj = this._getObjectAsYMapByName(name);
+    if (meta && obj) {
+      this.transact(() => void obj.set('shapeMetadata', meta));
+    }
+  }
+
+  static create(): IJupyterCadDoc {
+    return new JupyterCadDoc();
+  }
+
+  editable = true;
+  exportable = false;
+
+  private _getObjectAsYMapByName(name: string): Y.Map<any> | undefined {
+    for (const obj of this._objects) {
+      if (obj.get('name') === name) {
+        return obj;
+      }
+    }
+    return undefined;
+  }
+
+  private _objectsObserver = (events: Y.YEvent<any>[]): void => {
+    const changes: Array<{
+      name: string;
+      key: keyof IJCadObject;
+      newValue: IJCadObject;
+    }> = [];
+    let needEmit = false;
+    events.forEach(event => {
+      const name = event.target.get('name');
+
+      if (name) {
+        event.keys.forEach((change, key) => {
+          if (!needEmit && key !== 'shapeMetadata') {
+            needEmit = true;
+          }
+          changes.push({
+            name,
+            key: key as any,
+            newValue: JSONExt.deepCopy(event.target.toJSON())
+          });
+        });
+      }
+    });
+    needEmit = changes.length === 0 ? true : needEmit;
+    if (needEmit) {
+      this._objectsChanged.emit({ objectChange: changes });
+    }
+    this._changed.emit({ objectChange: changes });
+  };
+
+  private _metaObserver = (event: Y.YMapEvent<string>): void => {
+    this._metadataChanged.emit(event.keys);
+  };
+
+  private _optionsObserver = (event: Y.YMapEvent<Y.Map<string>>): void => {
+    this._optionsChanged.emit(event.keys);
+  };
+
+  private _objects: Y.Array<Y.Map<any>>;
+  private _options: Y.Map<any>;
+  private _metadata: Y.Map<string>;
+  private _outputs: Y.Map<IPostResult>;
+  private _metadataChanged = new Signal<IJupyterCadDoc, MapChange>(this);
+  private _optionsChanged = new Signal<IJupyterCadDoc, MapChange>(this);
+  private _objectsChanged = new Signal<IJupyterCadDoc, IJcadObjectDocChange>(
+    this
+  );
+}

packages/schema/src/index.ts

@@ -1,3 +1,4 @@
 export * from './interfaces';
 export * from './model';
 export * from './token';
+export * from './doc';