Basic React + TypeScript app skeleton + downloading of deps
This commit is contained in:
ochafik
parent
8aefb2759e
commit
6486d698d4
16 changed files with 422 additions and 1 deletions
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -1,6 +1,10 @@
|
|||
node_modules
|
||||
libs
|
||||
public/libraries
|
||||
public/openscad-worker-inlined.js
|
||||
public/openscad.js
|
||||
public/openscad.wasm
|
||||
js
|
||||
src/*.js
|
||||
build
|
||||
package-lock.json
|
||||
143
Makefile
Normal file
143
Makefile
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
WASM_BUILD_URL=https://files.openscad.org/snapshots/OpenSCAD-2023.03.22.wasm14181-WebAssembly.zip
|
||||
|
||||
SINGLE_BRANCH_MAIN=--branch main --single-branch
|
||||
SINGLE_BRANCH=--branch master --single-branch
|
||||
SHALLOW=--depth 1
|
||||
|
||||
all: build
|
||||
|
||||
.PHONY: public
|
||||
public: \
|
||||
public/openscad.js \
|
||||
public/libraries/fonts.zip \
|
||||
public/libraries/NopSCADlib.zip \
|
||||
public/libraries/BOSL.zip \
|
||||
public/libraries/BOSL2.zip \
|
||||
public/libraries/funcutils.zip \
|
||||
public/libraries/FunctionalOpenSCAD.zip \
|
||||
public/libraries/YAPP_Box.zip \
|
||||
public/libraries/MCAD.zip \
|
||||
public/libraries/smooth-prim.zip \
|
||||
public/libraries/plot-function.zip \
|
||||
public/libraries/openscad-tray.zip \
|
||||
public/libraries/closepoints.zip \
|
||||
public/libraries/Stemfie_OpenSCAD.zip \
|
||||
public/libraries/UB.scad.zip
|
||||
|
||||
clean:
|
||||
rm -rf libs build
|
||||
rm -rf public/libraries
|
||||
|
||||
build: public
|
||||
npm run build
|
||||
|
||||
public/openscad.js:
|
||||
wget ${WASM_BUILD_URL} -O OpenSCAD-WebAssembly.zip
|
||||
( cd public && rm openscad.{js,wasm} && unzip ../OpenSCAD-WebAssembly.zip )
|
||||
rm OpenSCAD-WebAssembly.zip
|
||||
|
||||
public/libraries/fonts.zip: libs/liberation
|
||||
mkdir -p public/libraries
|
||||
cp fonts.conf libs/liberation
|
||||
( cd libs/liberation && zip -r ../../public/libraries/fonts.zip fonts.conf *.ttf LICENSE AUTHORS )
|
||||
|
||||
libs/liberation:
|
||||
git clone --recurse https://github.com/shantigilbert/liberation-fonts-ttf.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
libs/BOSL2:
|
||||
git clone --recurse https://github.com/revarbat/BOSL2.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/BOSL2.zip: libs/BOSL2
|
||||
mkdir -p public/libraries
|
||||
( cd libs/BOSL2 ; zip -r ../../public/libraries/BOSL2.zip *.scad LICENSE )
|
||||
|
||||
libs/BOSL:
|
||||
git clone --recurse https://github.com/revarbat/BOSL.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/BOSL.zip: libs/BOSL
|
||||
mkdir -p public/libraries
|
||||
( cd libs/BOSL ; zip -r ../../public/libraries/BOSL.zip *.scad LICENSE )
|
||||
|
||||
libs/NopSCADlib:
|
||||
git clone --recurse https://github.com/nophead/NopSCADlib.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/NopSCADlib.zip: libs/NopSCADlib
|
||||
mkdir -p public/libraries
|
||||
( cd libs/NopSCADlib ; zip -r ../../public/libraries/NopSCADlib.zip `find . -name '*.scad' | grep -v tests | grep -v examples` COPYING )
|
||||
|
||||
libs/funcutils:
|
||||
git clone --recurse https://github.com/thehans/funcutils.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/funcutils.zip: libs/funcutils
|
||||
mkdir -p public/libraries
|
||||
( cd libs/funcutils ; zip -r ../../public/libraries/funcutils.zip *.scad LICENSE )
|
||||
|
||||
libs/FunctionalOpenSCAD:
|
||||
git clone --recurse https://github.com/thehans/FunctionalOpenSCAD.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/FunctionalOpenSCAD.zip: libs/FunctionalOpenSCAD
|
||||
mkdir -p public/libraries
|
||||
( cd libs/FunctionalOpenSCAD ; zip -r ../../public/libraries/FunctionalOpenSCAD.zip *.scad LICENSE )
|
||||
|
||||
libs/YAPP_Box:
|
||||
git clone --recurse https://github.com/mrWheel/YAPP_Box.git ${SHALLOW} ${SINGLE_BRANCH_MAIN} $@
|
||||
|
||||
public/libraries/YAPP_Box.zip: libs/YAPP_Box
|
||||
mkdir -p public/libraries
|
||||
( cd libs/YAPP_Box ; zip -r ../../public/libraries/YAPP_Box.zip *.scad LICENSE )
|
||||
|
||||
libs/MCAD:
|
||||
git clone --recurse https://github.com/openscad/MCAD.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/MCAD.zip: libs/MCAD
|
||||
mkdir -p public/libraries
|
||||
( cd libs/MCAD ; zip -r ../../public/libraries/MCAD.zip *.scad bitmap/*.scad LICENSE )
|
||||
|
||||
libs/Stemfie_OpenSCAD:
|
||||
git clone --recurse https://github.com/Cantareus/Stemfie_OpenSCAD.git ${SHALLOW} ${SINGLE_BRANCH_MAIN} $@
|
||||
|
||||
public/libraries/Stemfie_OpenSCAD.zip: libs/Stemfie_OpenSCAD
|
||||
mkdir -p public/libraries
|
||||
( cd libs/Stemfie_OpenSCAD ; zip -r ../../public/libraries/Stemfie_OpenSCAD.zip *.scad LICENSE )
|
||||
|
||||
# libs/threads:
|
||||
# git clone --recurse https://github.com/rcolyer/threads.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
# public/libraries/threads.zip: libs/threads
|
||||
# mkdir -p public/libraries
|
||||
# ( cd libs/threads ; zip -r ../../public/libraries/threads.zip *.scad LICENSE.txt )
|
||||
|
||||
libs/smooth-prim:
|
||||
git clone --recurse https://github.com/rcolyer/smooth-prim.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/smooth-prim.zip: libs/smooth-prim
|
||||
mkdir -p public/libraries
|
||||
( cd libs/smooth-prim ; zip -r ../../public/libraries/smooth-prim.zip *.scad LICENSE.txt )
|
||||
|
||||
libs/plot-function:
|
||||
git clone --recurse https://github.com/rcolyer/plot-function.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/plot-function.zip: libs/plot-function
|
||||
mkdir -p public/libraries
|
||||
( cd libs/plot-function ; zip -r ../../public/libraries/plot-function.zip *.scad LICENSE.txt )
|
||||
|
||||
libs/closepoints:
|
||||
git clone --recurse https://github.com/rcolyer/closepoints.git ${SHALLOW} ${SINGLE_BRANCH} $@
|
||||
|
||||
public/libraries/closepoints.zip: libs/closepoints
|
||||
mkdir -p public/libraries
|
||||
( cd libs/closepoints ; zip -r ../../public/libraries/closepoints.zip *.scad LICENSE.txt )
|
||||
|
||||
libs/UB.scad:
|
||||
git clone --recurse https://github.com/UBaer21/UB.scad.git ${SHALLOW} ${SINGLE_BRANCH_MAIN} $@
|
||||
|
||||
public/libraries/UB.scad.zip: libs/UB.scad
|
||||
mkdir -p public/libraries
|
||||
( cd libs/UB.scad ; zip -r ../../public/libraries/UB.scad.zip libraries/*.scad LICENSE )
|
||||
|
||||
libs/openscad-tray:
|
||||
git clone --recurse https://github.com/sofian/openscad-tray.git ${SHALLOW} ${SINGLE_BRANCH_MAIN} $@
|
||||
|
||||
public/libraries/openscad-tray.zip: libs/openscad-tray
|
||||
mkdir -p public/libraries
|
||||
( cd libs/openscad-tray ; zip -r ../../public/libraries/openscad-tray.zip *.scad LICENSE )
|
||||
12
README.md
12
README.md
|
|
@ -3,3 +3,15 @@
|
|||
WIP revamp of https://github.com/ochafik/openscad-wasm/tree/editor-ochafik.com / https://ochafik.com/openscad.
|
||||
|
||||
Licenses: see [LICENSES](./LICENSES).
|
||||
|
||||
## Build
|
||||
|
||||
Prerequisites:
|
||||
* wget
|
||||
* GNU make
|
||||
* npm
|
||||
* deno
|
||||
|
||||
```bash
|
||||
make
|
||||
```
|
||||
4
fonts.conf
Normal file
4
fonts.conf
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE fontconfig SYSTEM "urn:fontconfig:fonts.dtd">
|
||||
<fontconfig>
|
||||
</fontconfig>
|
||||
22
inline-openscad-worker.ts
Normal file
22
inline-openscad-worker.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
const [workerJsFile, openscadEmscriptenJsFile, outputFile, deploymentUrl] = Deno.args;
|
||||
console.log(`
|
||||
workerJsFile: ${workerJsFile}
|
||||
openscadEmscriptenJsFile: ${openscadEmscriptenJsFile}
|
||||
outputFile: ${outputFile}
|
||||
deploymentUrl: ${deploymentUrl}
|
||||
`)
|
||||
|
||||
const importMetaUrl = `${deploymentUrl}${outputFile.split('/').splice(-1)[0]}`
|
||||
|
||||
const workerJs = await Deno.readTextFile(workerJsFile);
|
||||
const openscadEmscriptenJs = await Deno.readTextFile(openscadEmscriptenJsFile);
|
||||
|
||||
const out = `// AUTO GENERATED FILE - DO NOT EDIT
|
||||
var import_meta_url = '${deploymentUrl}';
|
||||
|
||||
${openscadEmscriptenJs.replaceAll(/import.meta.url/g, 'import_meta_url').replaceAll(/export default OpenSCAD;/g, '')}
|
||||
|
||||
${workerJs.replaceAll(/import OpenSCAD from .*;/g, '')}
|
||||
`;
|
||||
|
||||
await Deno.writeTextFile(outputFile, out);
|
||||
49
package.json
Normal file
49
package.json
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"name": "openscad-playground",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@monaco-editor/react": "^4.4.6",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/react": "^18.0.28",
|
||||
"@types/react-dom": "^18.0.11",
|
||||
"monaco-editor": "^0.36.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.5",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"tsc": "tsc"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/filesystem": "^0.0.32",
|
||||
"@types/node": "^18.15.6"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
45
public/index.html
Normal file
45
public/index.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.min.js"></script>
|
||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/BrowserFS/2.0.0/browserfs.js"></script> -->
|
||||
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
|
||||
<meta
|
||||
name="description"
|
||||
content="OpenSCAD Playground: edit .scad models and render them to STL from the browser (WebAssembly build OpenSCAD, with Monaco editor and STL Viewer)"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!-- https://developers.google.com/web/fundamentals/web-app-manifest/ -->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>OpenSCAD Playground</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run the OpenSCAD Playground.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"short_name": "OpenSCAD",
|
||||
"name": "OpenSCAD Playground",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
38
src/App.css
Normal file
38
src/App.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
24
src/App.tsx
Normal file
24
src/App.tsx
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import React from 'react';
|
||||
import logo from '../public/logo.png';
|
||||
import './App.css';
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src="logo.png" className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to reload.
|
||||
</p>
|
||||
<a
|
||||
className="App-link"
|
||||
href="https://openscad.org"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Learn OpenSCAD
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
13
src/index.css
Normal file
13
src/index.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||
monospace;
|
||||
}
|
||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext",
|
||||
"WebWorker",
|
||||
],
|
||||
"outDir": "js",
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src/*.ts",
|
||||
"public"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue