Refactor

.github/workflows/ci.yml

@@ -0,0 +1,91 @@
+name: CI
+
+on:
+  push:
+    # branches: ["main"]
+    branches: ["*"]
+  pull_request:
+    types: [opened, synchronize]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  build:
+    name: Build, Test & Deploy
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+    # env:
+    #  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+    #  TURBO_TEAM: ${{ vars.TURBO_TEAM }}
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+      - name: Cache turbo build setup
+        uses: actions/cache@v4
+        with:
+          path: .turbo
+          key: ${{ runner.os }}-turbo-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-turbo-
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - uses: jetli/wasm-pack-action@v0.4.0
+        with:
+          # Optional version of wasm-pack to install(eg. 'v0.9.1', 'latest')
+          version: "latest"
+      - name: Build cadmium
+        run: pnpm build:wasm
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install playwright dependencies
+        run: pnpm exec playwright install
+      - name: Build
+        env:
+          BASE_PATH: '/${{ github.event.repository.name }}'
+        run: pnpm turbo run build
+      - name: Test
+        run: pnpm turbo run test
+      - uses: actions/upload-artifact@v4
+        with:
+          name: cadmium
+          path: applications/web/dist
+      - name: Setup Github Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: applications/web/dist
+
+# https://kit.svelte.dev/docs/adapter-static#github-pages
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4      

.gitignore

@@ -1,12 +1,10 @@
 .DS_Store
-node_modules
+/node_modules/
 /build
 /dist
 /.svelte-kit
 /package
-.env
-.env.*
-!.env.example
+*.env*
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-types.guard.ts
+.turbo

.vscode/settings.json

@@ -1,11 +1,15 @@
 {
-    "rust-analyzer.linkedProjects": [
-        "packages/cadmium/Cargo.toml",
-    ],
-    "[markdown]": {
-        "editor.formatOnSave": false,
-    },
-    "javascript.format.semicolons": "remove",
-    "typescript.preferences.quoteStyle": "double",
-    "javascript.preferences.quoteStyle": "double"
-} 
+	"rust-analyzer.linkedProjects": ["packages/cadmium/Cargo.toml"],
+	"[markdown]": {
+		"editor.formatOnSave": false
+	},
+	"javascript.format.semicolons": "remove",
+	"typescript.preferences.quoteStyle": "double",
+	"javascript.preferences.quoteStyle": "double",
+	"editor.tabSize": 2,
+	"eslint.workingDirectories": [
+    {
+      "mode": "auto"
+    }
+  ]
+}

README.md

@@ -35,20 +35,41 @@ This software is offered under the [Elastic License 2.0](https://www.elastic.co/
 
 ## Running The Code
 
-If you're just trying to kick the tires, [click here](https://cadmium-nine.vercel.app/threlte) to view the live web demo.
+If you're just trying to kick the tires, [click here](https://MattFerraro.github.io/CADmium/) to view the live web demo.
 
-To build locally using pnpm workspace:
+To build locally using pnpm workspace & turbo:
 
-```
+```shell
 git clone https://github.com/MattFerraro/CADmium.git
 cd CADmium
-pnpm run build:wasm
+pnpm build:wasm
 pnpm install
-pnpm run dev
+turbo dev
 ```
 
 You will need rust and wasm-pack working locally. See `vercel_build.sh` for an example of installing these dependencies.
 
+## Running Tests
+
+```shell
+turbo test
+```
+
+Playwright is used for e2e testing. You may be prompted with a command to install it.
+
+For manjaro/archlinux folks it may report missing dependencies. On manjaro the missing dependencies are solved [thanks to this comment](https://github.com/microsoft/playwright/issues/2621#issuecomment-931530175):
+
+```shell
+yay -S aur/enchant1.6 aur/icu66 aur/libwebp052
+```
+
+Watch vitest unit tests only:
+
+```shell
+cd applications/web
+pnpm test:unit -w 
+```
+
 ## Contributing
 
 I am not currently able to handle contributions. After the 0.1 release in April I will be looking for help in a few areas:

applications/web/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	extends: ["eslint:recommended", "plugin:svelte/recommended", "prettier"],
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2020,
+		extraFileExtensions: [".svelte"]
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+}

applications/web/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/dist
+/.svelte-kit
+/package
+.env
+*.env.*
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+types.guard.ts

.prettierrc → applications/web/.prettierrc

@@ -3,12 +3,8 @@
 	"singleQuote": false,
 	"trailingComma": "none",
 	"printWidth": 120,
-	"plugins": [
-		"prettier-plugin-svelte"
-	],
-	"pluginSearchDirs": [
-		"."
-	],
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
 	"semi": false,
 	"overrides": [
 		{
@@ -24,4 +20,4 @@
 			}
 		}
 	]
-}
+}

applications/web/package.json

@@ -0,0 +1,58 @@
+{
+	"name": "cadmium-web",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"serve": "pnpm build && serve -p 5174 dist",
+		"clean": "rm -rf .turbo .svelte-kit dist node_modules",
+		"preview": "vite preview",
+		"test": "pnpm test:integration && pnpm test:unit",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"svelte-check": "svelte-check",
+		"test:integration": "playwright test",
+		"test:unit": "vitest",
+		"types:guard": "ts-auto-guard --export-all src/types.d.ts"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.42.1",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.3",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"autoprefixer": "^10.4.18",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.35.1",
+		"phosphor-svelte": "^1.4.2",
+		"postcss": "^8.4.35",
+		"postcss-load-config": "^5.0.3",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.2",
+		"serve": "^14.2.1",
+		"svelte": "^4.2.12",
+		"svelte-check": "^3.6.6",
+		"tailwindcss": "^3.4.1",
+		"ts-auto-guard": "^4.2.0",
+		"vite": "^5.1.5",
+		"vitest": "^1.3.1"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource-variable/manrope": "^5.0.19",
+		"@threlte/core": "^7.2.1",
+		"@threlte/extras": "^8.10.1",
+		"@types/three": "^0.162.0",
+		"cadmium": "workspace:*",
+		"camera-controls": "^2.8.3",
+		"gsap": "^3.12.5",
+		"js-file-download": "^0.4.12",
+		"nurbs": "^1.1.1",
+		"shared": "workspace:*",
+		"three": "^0.162.0",
+		"troika-three-text": "^0.49.0",
+		"vite-plugin-top-level-await": "^1.4.1",
+		"vite-plugin-wasm": "^3.3.0"
+	}
+}

postcss.config.cjs → applications/web/postcss.config.cjs

@@ -1,5 +1,5 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
+const tailwindcss = require("tailwindcss")
+const autoprefixer = require("autoprefixer")
 
 const config = {
 	plugins: [
@@ -8,6 +8,6 @@ const config = {
 		//But others, like autoprefixer, need to run after,
 		autoprefixer
 	]
-};
+}
 
-module.exports = config;
+module.exports = config

applications/web/src/app.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<!-- <link rel="icon" href="%sveltekit.assets%/favicon.png" /> -->
+		<link rel="icon" href="%sveltekit.assets%/cadmium_logo_min.svg" />
+		<meta name="viewport" content="width=device-width" />
+		<title>CADmium</title>
+		%sveltekit.head%
+	</head>
+
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

applications/web/src/app.postcss

@@ -0,0 +1,14 @@
+/* Write your global styles here, in PostCSS syntax */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+	.btn-primary {
+		@apply h-[45px] px-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
+	}
+}
+
+body {
+	font-family: "Manrope Variable", sans-serif;
+}

src/routes/threlte/+page.svelte → applications/web/src/routes/(CADmium)/+page.svelte

@@ -6,7 +6,7 @@
 	import BottomBar from "./BottomBar.svelte"
 	import MainDisplay from "./MainDisplay.svelte"
 	import ToolBar from "./ToolBar.svelte"
-	import { workbenchIsStale, wasmProject, project, projectIsStale, featureIndex } from "./stores"
+	import { workbenchIsStale, wasmProject, project, projectIsStale, featureIndex } from "shared/stores"
 
 	// prettier-ignore
 	const log = (function () { const context = "[+page.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()

src/routes/threlte/AppBar.svelte → applications/web/src/routes/(CADmium)/AppBar.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import fileDownload from "js-file-download"
-	import { wasmProject, messageHistory } from "./stores"
+	import { wasmProject, messageHistory } from "shared/stores"
 	import type { Project } from "cadmium"
-
 	import Download from "phosphor-svelte/lib/Download"
 	import Upload from "phosphor-svelte/lib/Upload"
 	import Bug from "phosphor-svelte/lib/Bug"
-	import type { WithTarget } from "../../types"
-	import { isProject } from "../../typeGuards"
+	import type { WithTarget } from "shared/types"
+	import { isProject } from "shared/typeGuards"
+	import { base } from "$app/paths"
 
 	// prettier-ignore
 	const log = (function () { const context = "[AppBar.svelte]"; const color="gray"; return Function.prototype.bind.call(console.log, console, `%c${context}`, `font-weight:bold;color:${color};`)})()
@@ -43,7 +43,7 @@
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="flex items-center gap-4 bg-gray-">
 		<div class="shrink-0 select-none">
-			<img class="object-cover h-10 w-10 ml-4" alt="logo" src="/cadmium_logo_min.svg" />
+			<img class="object-cover h-10 w-10 ml-4" alt="logo" src="{base}/cadmium_logo_min.svg" />
 		</div>
 		<div class="select-none">CADmium</div>
 		<div class="text-xl font-medium">{project.name ?? ""}</div>
@@ -82,7 +82,7 @@
 		<div class="flex-grow flex flex-row-reverse gap-4 mr-4">
 			<div>
 				<a href="https://github.com/mattferraro/cadmium"
-					><img class="h-6 w-6" src="/github-mark.svg" alt="github logo" /></a
+					><img class="h-6 w-6" src="{base}/github-mark.svg" alt="github logo" /></a
 				>
 			</div>
 			<div>{userName}</div>