Split components out into libraries for reuse with slang-vscode-extension (#157)

* Fully working library split

* formatting

* Fix compiler wasm types

* Ensure dependencies are built first

* Fix smoke test path

* Reduce size of build files

* Add versions to package.json to fix issue when using libraries externally

* Add missing version

* Improve engine dependency management

* Fix uniform panel text colors

* Update README build instructions

* Regenerate broken lock file

* delete engine package.json

Author: Devon7925

.github/workflows/ci.yml

@@ -18,6 +18,11 @@ jobs:
         with:
           build-artifacts-dir: ./src
 
+      - name: Copy types to compilation engine
+        run: |
+          cp ./src/slang-wasm.d.ts ./engine/slang-compilation-engine/media/slang-wasm.d.ts
+          cp ./src/spirv-tools.d.ts ./engine/slang-compilation-engine/media/spirv-tools.d.ts
+
       - name: Build
         run: |
           npm install
@@ -41,4 +46,4 @@ jobs:
           gzip -d src/slang-wasm.wasm.gz
           cp src/slang-wasm.wasm ./
           cp slang-repo/tests/wasm/smoke/smoke-test.js slang-repo/
-          node slang-repo/smoke-test.js src/slang/rand_float.slang computeMain
+          node slang-repo/smoke-test.js engine/slang-compilation-engine/src/slang/rand_float.slang computeMain

README.md

@@ -33,6 +33,8 @@ Move them into the `src` directory of the slang-playground.
 
 Run `npm install` to install dependencies.
 
+Run `npm run build-engine` to build library files. You will need to do this any time they are updated.
+
 Run `npm run dev` to start the development server. The command will show you the URL where you can access the playground.
 
 Run `npm run build` to build the project. It will create a `dist` directory with the build artifacts. The website should be hostable on any static file server from this directory.

engine/playground-render-canvas/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "playground-render-canvas",
+	"version": "0.0.1",
+	"description": "Extension for the Slang Shading Language",
+	"main": "dist/index.umd.js",
+	"module": "dist/index.es.js",
+	"types": "dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"style": "./dist/playground-render-canvas.css",
+			"import": "./dist/index.es.js",
+			"require": "./dist/index.umd.js"
+		},
+		"./dist/playground-render-canvas.css": {
+			"default": "./dist/playground-render-canvas.css"
+		}
+	},
+	"scripts": {
+		"build": "vite build",
+		"type-check": "vue-tsc --build"
+	},
+	"dependencies": {
+		"slang-playground-shared": "0.0.1"
+	},
+	"peerDependencies": {
+		"vue": "^3.5.17"
+	},
+	"devDependencies": {
+		"@types/node": "^24.0.14",
+		"@types/vscode": "^1.85.0",
+		"@vitejs/plugin-vue": "^5.0.4",
+		"@vscode/test-web": "^0.0.51",
+		"vite-plugin-dts": "^4.5.4",
+		"@webgpu/types": "^0.1.51",
+		"vue": "^3.5.17",
+		"vue-tsc": "^3.0.1"
+	},
+	"type": "module"
+}