Skip to content

Commit 56d16ca

Browse files
Devon7925Devon7925
authored
Vue rewrite (#106)
* vue rewrite * Improve tooltip code * Fix compilation visuals and debug overlay overflow * Fix error reporting * Working deploy and networking improvements * CI and README updates * readme tuning and ci check * Hopefully final fixes * fix pages build paths * Hopefully fix pages build again * Remove unused dependency * Fix reflection view not being scrollable * Fixed inconsistent loading in dev environment * Ensure tooltips can overflow
1 parent b799891 commit 56d16ca

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+5128
-1775
lines changed

‎.github/workflows/build-dependencies.yml

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Provides builds of slang and spirv-tools for the website
2+
name: Build Dependencies
3+
4+
on:
5+
# Allows you to run this workflow manually from the Actions tab
6+
workflow_dispatch:
7+
8+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
9+
permissions:
10+
contents: read
11+
pages: write
12+
id-token: write
13+
14+
jobs:
15+
# Build job
16+
build:
17+
runs-on: ubuntu-latest
18+
steps:
19+
- name: Checkout
20+
uses: actions/checkout@v4
21+
22+
- name: get slang head commit
23+
run: |
24+
sudo apt-get update
25+
sudo apt-get install -y ninja-build
26+
mkdir slang-repo
27+
pushd slang-repo
28+
git clone https://github.com/shader-slang/slang.git
29+
popd
30+
echo "$(git -C slang-repo/slang rev-parse HEAD)" >> key.txt
31+
32+
- name: get spirv-tool head commit
33+
run: |
34+
git clone https://github.com/KhronosGroup/SPIRV-Tools.git spirv-tools
35+
pushd spirv-tools
36+
git checkout vulkan-sdk-1.3.290.0
37+
popd
38+
echo "$(git -C spirv-tools rev-parse HEAD)" >> key-spirv-tool.txt
39+
40+
- name: slang-wasm build
41+
run: |
42+
sed -i -e 's/\r$//' ./slang-wasm-build.sh
43+
chmod +x ./slang-wasm-build.sh
44+
./slang-wasm-build.sh
45+
46+
- name: spirv-tools-wasm build
47+
run: |
48+
sed -i -e 's/\r$//' ./spirv-tool-wasm-build.sh
49+
chmod +x ./spirv-tool-wasm-build.sh
50+
./spirv-tool-wasm-build.sh
51+
52+
- name: Cleanup workspace, move files, and build
53+
run: |
54+
rm -rf slang-repo
55+
rm -rf emsdk
56+
rm -rf spirv-tools
57+
mkdir dependencies
58+
mv ./slang-wasm.wasm.gz ./slang-wasm.js ./slang-wasm.d.ts ./dependencies/
59+
mv ./spirv-tools.wasm ./spirv-tools.js ./spirv-tools.d.ts ./dependencies/
60+
61+
- name: Upload export artifact
62+
uses: actions/upload-artifact@v4
63+
with:
64+
name: site-artifact
65+
path: ./dependencies/
66+
compression-level: 1

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

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
# Sample workflow for building and deploying a Jekyll site to GitHub Pages
2-
name: Deploy Jekyll with GitHub Pages dependencies preinstalled
1+
name: Deploy to GitHub Pages
32

43
on:
54
# Runs on pushes targeting the default branch
@@ -102,33 +101,21 @@ jobs:
102101
./spirv-tools.d.ts
103102
key: ${{hashFiles('key-spirv-tool.txt')}}
104103

105-
- name: Cleanup workspace
104+
- name: Cleanup workspace, move files, and build
106105
run: |
107106
rm -rf slang-repo
108107
rm -rf emsdk
109108
rm -rf spirv-tools
110-
111-
- name: Build typescript
112-
run: |
109+
mv ./slang-wasm.wasm.gz ./slang-wasm.js ./slang-wasm.d.ts ./src/
110+
mv ./spirv-tools.wasm ./spirv-tools.js ./spirv-tools.d.ts ./src/
113111
npm install
114-
npx tsc
115-
116-
- name: Build with Jekyll
117-
uses: actions/jekyll-build-pages@v1
118-
with:
119-
source: ./
120-
destination: ./_site
112+
npm run build
121113
122-
- name: Copy depencencies
123-
run: |
124-
sudo mkdir ./_site/node_modules
125-
sudo cp -r node_modules/requirejs ./_site/node_modules/requirejs
126-
sudo cp -r node_modules/pako ./_site/node_modules/pako
127114
- name: Upload export artifact
128115
uses: actions/upload-artifact@v4
129116
with:
130117
name: site-artifact
131-
path: ./_site/
118+
path: ./dist/
132119
compression-level: 1
133120

134121
# Deployment job

‎.gitignore

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,39 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
.DS_Store
12+
dist
13+
dist-ssr
14+
coverage
15+
*.local
16+
17+
/cypress/videos/
18+
/cypress/screenshots/
19+
20+
# Editor directories and files
21+
.vscode/*
22+
!.vscode/extensions.json
23+
.idea
24+
*.suo
25+
*.ntvs*
26+
*.njsproj
27+
*.sln
28+
*.sw?
29+
30+
*.tsbuildinfo
31+
132
slang-wasm.js
233
slang-wasm.d.ts
334
slang-wasm.wasm
435
slang-wasm.wasm.gz
536
spirv-tools.js
637
spirv-tools.d.ts
738
spirv-tools.wasm
8-
node_modules/*
9-
*.js
1039
out/*

‎.vscode/settings.json

Lines changed: 7 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,8 @@
11
{
2-
"files.associations": {
3-
"xstring": "cpp",
4-
"atomic": "cpp",
5-
"bit": "cpp",
6-
"cctype": "cpp",
7-
"charconv": "cpp",
8-
"clocale": "cpp",
9-
"cmath": "cpp",
10-
"compare": "cpp",
11-
"concepts": "cpp",
12-
"cstddef": "cpp",
13-
"cstdint": "cpp",
14-
"cstdio": "cpp",
15-
"cstdlib": "cpp",
16-
"cstring": "cpp",
17-
"ctime": "cpp",
18-
"cwchar": "cpp",
19-
"exception": "cpp",
20-
"format": "cpp",
21-
"initializer_list": "cpp",
22-
"ios": "cpp",
23-
"iosfwd": "cpp",
24-
"iostream": "cpp",
25-
"istream": "cpp",
26-
"iterator": "cpp",
27-
"limits": "cpp",
28-
"list": "cpp",
29-
"locale": "cpp",
30-
"memory": "cpp",
31-
"new": "cpp",
32-
"ostream": "cpp",
33-
"stdexcept": "cpp",
34-
"streambuf": "cpp",
35-
"string": "cpp",
36-
"system_error": "cpp",
37-
"tuple": "cpp",
38-
"type_traits": "cpp",
39-
"typeinfo": "cpp",
40-
"unordered_map": "cpp",
41-
"utility": "cpp",
42-
"vector": "cpp",
43-
"xfacet": "cpp",
44-
"xhash": "cpp",
45-
"xiosbase": "cpp",
46-
"xlocale": "cpp",
47-
"xlocbuf": "cpp",
48-
"xlocinfo": "cpp",
49-
"xlocmes": "cpp",
50-
"xlocmon": "cpp",
51-
"xlocnum": "cpp",
52-
"xloctime": "cpp",
53-
"xmemory": "cpp",
54-
"xtr1common": "cpp",
55-
"xutility": "cpp"
56-
}
57-
}
2+
"explorer.fileNesting.enabled": true,
3+
"explorer.fileNesting.patterns": {
4+
"tsconfig.json": "tsconfig.*.json, env.d.ts",
5+
"vite.config.*": "jsconfig*, vitest.config.*, cypress.config.*, playwright.config.*",
6+
"package.json": "package-lock.json, pnpm*, .yarnrc*, yarn*, .eslint*, eslint*, .prettier*, prettier*, .editorconfig"
7+
}
8+
}

‎README.md

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,57 @@ git clone https://github.com/shader-slang/slang-playground.git
1010

1111
### Prerequisites
1212

13-
* Install [Docker](https://www.docker.com/get-started/)
14-
* Install [Github CLI](https://cli.github.com/)
15-
* install [Github Act](https://github.com/nektos/gh-act) as an extension using `gh extension install https://github.com/nektos/gh-act`
13+
* Install [Node.js](https://nodejs.org/en/download/)
1614

17-
### Building
15+
## Iterate
1816

19-
* Run `gh act -P ubuntu-latest=catthehacker/ubuntu:full-latest -j 'build' --artifact-server-path ./out`
20-
* This will create a file at `out/1/artifact/artifact.zip`
21-
* Extracting the zip file will provide a directory from which you can host the website
17+
First you need to get certain prerequisite files to run the project.
2218

23-
### Starting the Server
19+
* Fork this repository
20+
* Manually run the `Build Dependencies` workflow from the Actions tab of your fork
21+
* Download the artifacts from the workflow run
2422

25-
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.
23+
This should produce the following files:
2624

27-
```bash
28-
cd slang-playground
29-
```
25+
* `slang-wasm.js`
26+
* `slang-wasm.d.ts`
27+
* `slang-wasm.wasm.gz`
28+
* `spirv-tools.js`
29+
* `spirv-tools.d.ts`
30+
* `spirv-tools.wasm`
3031

31-
2. Start a Python web server to host the files:
32+
Move them into the `src` directory of the slang-playground.
3233

33-
```bash
34-
python serve.py
35-
```
34+
Run `npm install` to install dependencies.
3635

37-
3. Open `http://localhost:8000` in your browser to verify the server is running and the files are accessible. You should see the application loading the `.wasm` and `.js` files correctly.
36+
Run `npm run dev` to start the development server. The command will show you the URL where you can access the playground.
3837

39-
If any issues arise, ensure the `.wasm` file is properly compressed (`slang-wasm.wasm.gz`) and located in the correct directory.
38+
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.
4039

41-
## Iterate
40+
When updating CSS or some transitively included files, the browser may use the out of date file stored in the cache. To prevent this, you can hold Shift key and click Refresh to force the browser to reload all files.
4241

43-
In order to avoid the expensive build process, copy the following files from the output directory to the main directory:
42+
## Locally building dependencies
4443

45-
* `slang-wasm.js`
46-
* `slang-wasm.d.ts`
47-
* `slang-wasm.wasm`
48-
* `slang-wasm.wasm.gz`
49-
* `spirv-tools.js`
50-
* `spirv-tools.d.ts`
44+
### Prerequisites
5145

52-
Run `npm install` to install dependencies.
46+
* Install [Docker](https://www.docker.com/get-started/)
47+
* Install [Github CLI](https://cli.github.com/)
48+
* Install [Github Act](https://github.com/nektos/gh-act) as an extension using `gh extension install https://github.com/nektos/gh-act`
49+
50+
### Building
5351

54-
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.
52+
To get the dependencies locally, you can run the following command from the root of the repository:
5553

56-
Now load or reload `localhost:8000` in your browser to see the results.
54+
```bash
55+
gh act -P ubuntu-latest=catthehacker/ubuntu:full-latest -W '.github/workflows/build-dependencies.yml' --artifact-server-path ./out
56+
```
57+
58+
The files will then be available at `out/1/artifact/artifact.zip`.
59+
60+
### Building for deployment
61+
62+
* Run `gh act -P ubuntu-latest=catthehacker/ubuntu:full-latest -j 'build' --artifact-server-path ./out`
63+
* This will create a file at `out/1/artifact/artifact.zip`
64+
* Extracting the zip file will provide a directory from which you can host the website with any web server
65+
* As an example, you can use vscode's live server extension to host the website by opening `index.html`
5766

58-
When updating CSS or some transitively included files, the browser may use the out of date file stored in the cache. To prevent this, you can hold Shift key and click Refresh to force the browser to reload all files.

‎env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎host.bat

Lines changed: 0 additions & 4 deletions
This file was deleted.

0 commit comments

Comments
 (0)