Sandcastle Reborn

.github/workflows/deploy.yml

@@ -22,6 +22,8 @@ jobs:
       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       GITHUB_REPO: ${{ github.repository }}
       GITHUB_SHA: ${{ github.sha }}
+      BASE_URL: /cesium/${{ github.ref_name }}/
+      DEPLOYED_URL: https://ci-builds.cesium.com/cesium/${{ github.ref_name }}/
     steps:
       - uses: actions/checkout@v4
       - name: install node 20
@@ -40,6 +42,8 @@ jobs:
         run: npm pack --workspaces &> /dev/null
       - name: build apps
         run: npm run build-apps
+      - name: build sandcastle v2
+        run: npm run build-ci -w packages/sandcastle -- -l warn
       - uses: ./.github/actions/verify-package
       - name: deploy to s3
         if: ${{ env.AWS_ACCESS_KEY_ID != '' }}

.gitignore

@@ -13,6 +13,7 @@ Thumbs.db
 /Apps/Sandcastle/jsHintOptions.js
 /Apps/Sandcastle/gallery/gallery-index.js
 /Apps/Sandcastle/templates/bucket.css
+/Apps/Sandcastle2
 
 /Source/Assets/
 /Source/**/*.d.ts
@@ -43,4 +44,4 @@ yarn.lock
 .idea/shelf
 
 # Used in the CLA checking GitHub workflow
-GoogleConfig.json
+GoogleConfig.json

.markdownlintignore

@@ -1,4 +1,5 @@
 /node_modules
+packages/sandcastle/node_modules
 /ThirdParty
 /Tools/**
 

.prettierignore

@@ -19,6 +19,7 @@
 !**/*.html
 !**/*.md
 !**/*.ts
+!**/*.tsx
 
 # Re-ignore a few things caught above
 
@@ -34,6 +35,9 @@ packages/widgets/Build/**
 packages/widgets/index.js
 packages/widgets/Source/ThirdParty/**
 
+packages/sandcastle/node_modules/**
+Apps/Sandcastle2/**
+
 Specs/jasmine/**
 
 Apps/Sandcastle/ThirdParty

eslint.config.js

@@ -1,6 +1,9 @@
 import globals from "globals";
 import html from "eslint-plugin-html";
 import configCesium from "@cesium/eslint-config";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
 
 export default [
   {
@@ -15,6 +18,8 @@ export default [
       "Apps/HelloWorld.html",
       "Apps/Sandcastle/jsHintOptions.js",
       "Apps/Sandcastle/gallery/gallery-index.js",
+      "Apps/Sandcastle2/",
+      "packages/sandcastle/public/",
       "packages/engine/Source/Scene/GltfPipeline/**/*",
       "packages/engine/Source/Shaders/**/*",
       "Specs/jasmine/*",
@@ -74,6 +79,31 @@ export default [
       sourceType: "module",
     },
   },
+  ...[...tseslint.configs.recommended].map((config) => ({
+    // This is needed to restrict to a specific path unless using the tseslint.config function
+    // https://typescript-eslint.io/packages/typescript-eslint#config
+    ...config,
+    files: ["packages/sandcastle/**/*.{ts,tsx}"],
+  })),
+  {
+    // This config came from the vite project generation
+    files: ["packages/sandcastle/**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+    },
+  },
   {
     files: ["Specs/**/*", "packages/**/Specs/**/*"],
     languageOptions: {

gulpfile.js

@@ -44,7 +44,7 @@ if (/\.0$/.test(version)) {
 }
 const karmaConfigFile = resolve("./Specs/karma.conf.cjs");
 
-const devDeployUrl = "https://ci-builds.cesium.com/cesium/";
+const devDeployUrl = process.env.DEPLOYED_URL;
 const isProduction = process.env.PROD;
 
 //Gulp doesn't seem to have a way to get the currently running tasks for setting
@@ -250,6 +250,11 @@ export async function buildTs() {
     workspaces = packageJson.workspaces;
   }
 
+  // TODO: we probably need to manage workspaces better now
+  workspaces = workspaces.filter(
+    (workspace) => !workspace.includes("sandcastle"),
+  );
+
   // Generate types for passed packages in order.
   const importModules = {};
   for (const workspace of workspaces) {
@@ -694,12 +699,10 @@ export async function deployStatus() {
   const status = argv.status;
   const message = argv.message;
 
-  const deployUrl = `${devDeployUrl + process.env.BRANCH}/`;
+  const deployUrl = `${devDeployUrl}`;
   const zipUrl = `${deployUrl}Cesium-${version}.zip`;
   const npmUrl = `${deployUrl}cesium-${version}.tgz`;
-  const coverageUrl = `${
-    devDeployUrl + process.env.BRANCH
-  }/Build/Coverage/index.html`;
+  const coverageUrl = `${devDeployUrl}Build/Coverage/index.html`;
 
   return Promise.all([
     setStatus(status, deployUrl, message, "deployment"),

index.html

@@ -33,7 +33,12 @@
           </li>
           <li>
             <a href="Apps/Sandcastle/index.html">Sandcastle</a>
-            (<a href="Build/Apps/Sandcastle/index.html">built version</a>)
+            <ul>
+              <li>
+                <a href="Build/Apps/Sandcastle/index.html">Built Sandcastle</a>
+              </li>
+              <li><a href="Apps/Sandcastle2/index.html">Sandcastle v2</a></li>
+            </ul>
           </li>
           <li>
             <a href="Apps/CesiumViewer/index.html?inspector=true"

package.json

@@ -63,6 +63,8 @@
     "esbuild": "^0.25.0",
     "eslint": "^9.1.1",
     "eslint-plugin-html": "^8.1.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "express": "^5.1.0",
     "globals": "^16.0.0",
     "globby": "^14.0.0",
@@ -101,6 +103,7 @@
     "rimraf": "^5.0.0",
     "tsd-jsdoc": "^2.5.0",
     "typescript": "^5.3.2",
+    "typescript-eslint": "^8.30.1",
     "yargs": "^17.0.1"
   },
   "scripts": {
@@ -113,12 +116,13 @@
     "build-ts": "gulp buildTs",
     "build-third-party": "gulp buildThirdParty",
     "build-apps": "gulp buildApps",
+    "build-sandcastle": "npm run build-app --workspace packages/sandcastle",
     "clean": "gulp clean",
     "cloc": "gulp cloc",
     "coverage": "gulp coverage",
     "build-docs": "gulp buildDocs",
     "build-docs-watch": "gulp buildDocsWatch",
-    "eslint": "eslint \"./**/*.*js\" \"./**/*.html\" --cache --quiet",
+    "eslint": "eslint \"./**/*.*js\" \"./**/*.*ts*\" \"./**/*.html\" --cache --quiet",
     "make-zip": "gulp makeZip",
     "markdownlint": "markdownlint \"**/*.md\"",
     "release": "gulp release",
@@ -146,7 +150,7 @@
     "node": ">=18.18.0"
   },
   "lint-staged": {
-    "*.{js,cjs,mjs,css,html}": [
+    "*.{js,cjs,mjs,ts,tsx,css,html}": [
       "eslint --cache --quiet",
       "prettier --write"
     ],
@@ -157,6 +161,7 @@
   },
   "workspaces": [
     "packages/engine",
-    "packages/widgets"
+    "packages/widgets",
+    "packages/sandcastle"
   ]
 }

packages/sandcastle/.gitignore

@@ -0,0 +1,14 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+

packages/sandcastle/README.md

@@ -0,0 +1,61 @@
+# CesiumJS Sandcastle
+
+This package is the application for Sandcastle.
+
+## Running/Building
+
+- `npm run dev`: run the development server
+- `npm run build`: build locally with vite defaults
+- `npm run preview`: run the production build locally. <!--TODO: I'm not sure if we actually need this for our purposes -->
+- `npm run build-app`: build to static files in `/Apps/Sandcastle2` for hosting/access from the root cesium dev server
+- `npm run build-ci`: build to static files in `/Apps/Sandcastle2` and configure paths as needed for CI deployment
+
+Linting and style is managed under the project root's scripts.
+
+## Expanding the ESLint configuration
+
+<!-- TODO: this section was auto-generated, should figure out if we want these suggestions then remove this -->
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+});
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from "eslint-plugin-react-x";
+import reactDom from "eslint-plugin-react-dom";
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    "react-x": reactX,
+    "react-dom": reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs["recommended-typescript"].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+});
+```

packages/sandcastle/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sandcastle Reborn</title>
+    <style>
+      /* Load fonts for itwin-ui */
+      @font-face {
+        font-family: InterVariable;
+        font-style: normal;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("/fonts/InterVariable.woff2") format("woff2");
+      }
+
+      @font-face {
+        font-family: InterVariable;
+        font-style: italic;
+        font-weight: 100 900;
+        font-display: swap;
+        src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app-container"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

packages/sandcastle/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@cesium/sandcastle",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --config vite.config.dev.ts",
+    "build": "tsc -b && vite build --config vite.config.dev.ts",
+    "preview": "vite preview --config vite.config.dev.ts",
+    "build-app": "tsc -b && vite build --config vite.config.app.ts",
+    "build-ci": "tsc -b && vite build --config vite.config.ci.ts"
+  },
+  "dependencies": {
+    "@itwin/itwinui-react": "^5.0.0-alpha.14",
+    "@monaco-editor/react": "^4.7.0",
+    "monaco-editor": "^0.52.2",
+    "pako": "^2.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/pako": "^2.0.3",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-static-copy": "^2.3.1"
+  }
+}