Convert to typescript (#77)

* Fix spelling of "formated"
fixes shader-slang/slang#5714

* Initial work on typescript conversion

* Revert "Initial work on typescript conversion"

This reverts commit 2adca03.

* initial work on typescript conversion

* remove old files

* fix types for dependencies

* import across files and other fixes

* Set up slang wasm types

* Changes for working js code, at the cost of my sanity, a million type errors, and reflection not working

* typing improvements and reflection fix

* fix remaining element errors

* Improve types

* fix incorrect language setting

* fix floating variable types + ui code improvements

* build improvements

* reenable deployment

* update readme to be closer to version on main

* fix order of typescript build

* download artifact so it can be used for deploy

Author: Devon7925

.github/workflows/jekyll-gh-pages.yml

@@ -29,11 +29,11 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
 
       - name: get slang head commit
         run: |
+          sudo apt-get update
+          sudo apt-get install -y ninja-build
           mkdir slang-repo
           pushd slang-repo
           git clone https://github.com/shader-slang/slang.git
@@ -55,6 +55,7 @@ jobs:
           path: |
             ./slang-wasm.wasm.gz
             ./slang-wasm.js
+            ./slang-wasm.d.ts
           key: ${{hashFiles('key.txt')}}
 
       - name: restore spirv-tools
@@ -64,11 +65,14 @@ jobs:
           path: |
             ./spirv-tools.wasm
             ./spirv-tools.js
+            ./spirv-tools.d.ts
           key: ${{hashFiles('key-spirv-tool.txt')}}
 
       - name: slang-wasm build
         if: steps.cache_slang.outputs.cache-hit != 'true'
         run: |
+          sed -i -e 's/\r$//' ./slang-wasm-build.sh
+          chmod +x ./slang-wasm-build.sh
           ./slang-wasm-build.sh
 
       - name: save slang-wasm
@@ -78,11 +82,14 @@ jobs:
           path: |
             ./slang-wasm.wasm.gz
             ./slang-wasm.js
+            ./slang-wasm.d.ts
           key: ${{hashFiles('key.txt')}}
 
       - name: spirv-tools-wasm build
         if: steps.cache_spirv_tools.outputs.cache-hit != 'true'
         run: |
+          sed -i -e 's/\r$//' ./spirv-tool-wasm-build.sh
+          chmod +x ./spirv-tool-wasm-build.sh
           ./spirv-tool-wasm-build.sh
 
       - name: save spirv-tools-wasm
@@ -92,6 +99,7 @@ jobs:
           path: |
             ./spirv-tools.wasm
             ./spirv-tools.js
+            ./spirv-tools.d.ts
           key: ${{hashFiles('key-spirv-tool.txt')}}
 
       - name: Cleanup workspace
@@ -100,13 +108,29 @@ jobs:
           rm -rf emsdk
           rm -rf spirv-tools
 
+      - name: Build typescript
+        run: |
+          npm install
+          npx tsc
+
       - name: Build with Jekyll
         uses: actions/jekyll-build-pages@v1
         with:
           source: ./
           destination: ./_site
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
+
+      - name: Copy depencencies
+        run: |
+          sudo mkdir ./_site/node_modules
+          sudo cp -r node_modules/jjsontree.js ./_site/node_modules/jjsontree.js
+          sudo cp -r node_modules/requirejs ./_site/node_modules/requirejs
+          sudo cp -r node_modules/pako ./_site/node_modules/pako
+      - name: Upload export artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: site-artifact
+          path: ./_site/
+          compression-level: 1  
 
   # Deployment job
   deploy:
@@ -116,6 +140,18 @@ jobs:
     runs-on: ubuntu-latest
     needs: build
     steps:
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Download a single artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: site-artifact
+          path: ./_site/
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.gitignore

@@ -1,3 +1,11 @@
 slang-wasm.js
+slang-wasm.d.ts
 slang-wasm.wasm
 slang-wasm.wasm.gz
+spirv-tools.js
+spirv-tools.d.ts
+spirv-tools.wasm
+node_modules/*
+package-lock.json
+*.js
+out/*

README.md

@@ -10,66 +10,26 @@ git clone https://github.com/shader-slang/slang-playground.git
 
 ### Prerequisites
 
-Ensure the following tools are installed and properly configured on your system:
-- **CMake** (Version 3.25 or greater is preferred, if you're on a lower version please see [build with older cmake](https://github.com/shader-slang/slang/blob/master/docs/building.md#building-with-an-older-cmake))
-- A **C++ compiler** with C++17 support (GCC, Clang, or MSVC)
-- A **CMake-compatible build backend** (e.g., Ninja or Visual Studio)
-- **Python 3** (Required for building and running the server)
-- **gzip** (For compressing `.wasm` files)
-
-To install the above tools on linux, run:
-```bash
-sudo apt update
-sudo apt install build-essential cmake ninja-build python3 python3-pip gzip
-```
-
-We need to build `slang-wasm` because we need `slang-wasm.js` and `slang-wasm.wasm` files.
-The reason they're not included in this repo is that they are big binary files, and the result of building top of tree slang, so making this part of the CI build process makes the most sense.
-
-### Building `slang-wasm`
-
-1. Clone the [Slang repository](https://github.com/shader-slang/slang) and fetch its submodules:
-   ```bash
-   git clone https://github.com/shader-slang/slang --recursive
+* Install [Docker](https://www.docker.com/get-started/)
+* Install [Github CLI](https://cli.github.com/)
+* install [Github Act](https://github.com/nektos/gh-act) as an extension using `gh extension install https://github.com/nektos/gh-act`
 
-   cd slang
-   ```
-
-2. Follow the instructions in the [WebAssembly build section](https://github.com/shader-slang/slang/blob/master/docs/building.md#webassembly-build) of the Slang documentation to:
-   - Set up the [Emscripten SDK](https://github.com/emscripten-core/emsdk) by installing and activating it.
-   - Build the WebAssembly target (`slang-wasm.js` and `slang-wasm.wasm`) using the documented cross-compilation steps.
-
-3. Once the build completes, locate `slang-wasm.js` and `slang-wasm.wasm` in the `build.em/Release/bin` directory
-   
-4. Copy `slang-wasm.js` and `slang-wasm.wasm` to the **root of the playground directory**.
-
-5. Compress the `slang-wasm.wasm` file using gzip:
-   ```bash
-   gzip -k slang-wasm.wasm
-   ```
+### Building
 
-### Building `spirv-tool`
-
-To enable SPIR-V disassembly in the playground (alongside the SPIR-V binary compilation supported by `slang-wasm.js`), you need to build the WebAssembly version of `spirv-tool`. This is necessary because `slang-wasm.js` does not include the SPIR-V disassembler.
-
-1. Refer to the build process outlined in the CI configuration:
-   - [GitHub Workflow](https://github.com/shader-slang/slang-playground/blob/main/.github/workflows/jekyll-gh-pages.yml#L43)
-   - [Build Script](https://github.com/shader-slang/slang-playground/blob/main/spirv-tool-wasm-build.sh)
-
-2. Use the provided [`spirv-tool-wasm-build.sh`](https://github.com/shader-slang/slang-playground/blob/main/spirv-tool-wasm-build.sh) script to compile the WebAssembly build of `spirv-tool`.
-
-3. Once built, place the resulting files (`spirv-tools.wasm` and `spirv-tools.js`) in the **root of the playground directory** alongside `slang-wasm.js` and `slang-wasm.wasm`.
-
-By completing this step, the playground will support SPIR-V disassembly features.
+* Run `gh act -P ubuntu-latest=catthehacker/ubuntu:full-latest -j 'build' --artifact-server-path ./out`
+* This will create a file at `out/1/artifact/artifact.zip`
+* Extracting the zip file will provide a directory from which you can host the website
 
 ### Starting the Server
 
-1. Navigate to the root of your playground directory (where `slang-wasm.js` and `slang-wasm.wasm.gz` are located).
+1. Navigate to the root of your webfiles (where `slang-wasm.js` and `slang-wasm.wasm.gz` are located) either in the artifact folder or the root of your playground directory.
+
    ```bash
    cd slang-playground
    ```
 
 2. Start a Python web server to host the files:
+
    ```bash
    python -m http.server 8000
    ```
@@ -78,26 +38,19 @@ By completing this step, the playground will support SPIR-V disassembly features
 
 If any issues arise, ensure the `.wasm` file is properly compressed (`slang-wasm.wasm.gz`) and located in the correct directory.
 
-This process of: build -> run, should work alone.
+## Iterate
 
-## Iterating on Development Using build.mk
+In order to avoid the expensive build process, copy the following files from the output directory to the main directory:
 
-Alternatively you can build using the `build.mk` file.
+* `slang-wasm.js`
+* `slang-wasm.d.ts`
+* `slang-wasm.wasm`
+* `slang-wasm.wasm.gz`
+* `spirv-tools.js`
+* `spirv-tools.d.ts`
 
-Set up the environment as follows:
+Run `npm install` to install dependencies.
 
-```bash
-## The output directory where to output target (non-source) files
-export TRY_SLANG_TARGET_DIRECTORY_PATH="path-to-slang-target-directory"
-## Path to the hello-emscripten source tree
-export TRY_SLANG_SOURCE_DIRECTORY_PATH="path-to-slang-source-directory"
-## Slang source directory
-export TRY_SLANG_SLANG_SOURCE_DIRECTORY_PATH="path-to-slang-directory"
-```
+You can then run `npx tsc` and host the webserver from the main directory. You will either need to run `npx tsc` whenever you make a code change, or you can run `npx tsc --watch` to continuously compile.
 
-1. Make the necessary changes to your source code.
-2. Build the updated runtime by running:
-   ```bash
-   make -f ./build.mk website_runtime
-   ```
-3. Refresh `http://localhost:8000` in your browser to view the changes.
+Now load or reload `localhost:8000` in your browser to see the results.