@react-scad/core 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +39 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,23 +1,29 @@
|
|
|
1
|
-
# react-scad
|
|
1
|
+
# [react-scad](https://github.com/react-scad/react-scad) · [](https://github.com/react-scad/react-scad/blob/main/LICENSE) [](https://www.npmjs.com/package/@react-scad/core) [](https://github.com/react-scad/react-scad/actions/workflows/cicd.yml) [](https://github.com/react-scad/react-scad#contributing)
|
|
2
2
|
|
|
3
|
-
Render JSX to **
|
|
3
|
+
Render JSX to **SCAD** models using the [React reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler).
|
|
4
4
|
|
|
5
5
|
- Describe models as a tree of components instead of imperative SCAD; avoids nested modules and parameter threading.
|
|
6
6
|
- Same React/JSX mental model (components, props, composition), output is 3D.
|
|
7
7
|
- Writes plain `.scad` files for [OpenSCAD](https://openscad.org/) or any slicer.
|
|
8
8
|
|
|
9
|
+
---
|
|
10
|
+
|
|
9
11
|
## Preview
|
|
10
12
|
|
|
11
13
|

|
|
12
14
|
|
|
13
15
|
*Rocket example with animated rotation.*
|
|
14
16
|
|
|
17
|
+
---
|
|
18
|
+
|
|
15
19
|
## Why react-scad?
|
|
16
20
|
|
|
17
21
|
SCAD is good for parametric 3D but scripts are imperative and nesting gets heavy; composing modules and passing parameters is tedious.
|
|
18
22
|
|
|
19
23
|
A lot of people already think in components and JSX from building UIs. **react-scad** aims to facilitate that same way of thinking for parametric 3D.
|
|
20
24
|
|
|
25
|
+
---
|
|
26
|
+
|
|
21
27
|
## Getting Started
|
|
22
28
|
|
|
23
29
|
### Prerequisites
|
|
@@ -31,7 +37,8 @@ A lot of people already think in components and JSX from building UIs. **react-s
|
|
|
31
37
|
npm install react @react-scad/core
|
|
32
38
|
```
|
|
33
39
|
|
|
34
|
-
|
|
40
|
+
<details>
|
|
41
|
+
<summary>pnpm or yarn</summary>
|
|
35
42
|
|
|
36
43
|
```bash
|
|
37
44
|
pnpm add react @react-scad/core
|
|
@@ -39,6 +46,8 @@ pnpm add react @react-scad/core
|
|
|
39
46
|
yarn add react @react-scad/core
|
|
40
47
|
```
|
|
41
48
|
|
|
49
|
+
</details>
|
|
50
|
+
|
|
42
51
|
### Minimal example
|
|
43
52
|
|
|
44
53
|
Create a file `main.tsx` (or `main.jsx`):
|
|
@@ -57,14 +66,18 @@ root.render(
|
|
|
57
66
|
);
|
|
58
67
|
```
|
|
59
68
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
69
|
+
| Piece | Meaning |
|
|
70
|
+
| ----- | ------- |
|
|
71
|
+
| `createRoot("model.scad")` | Root that writes to `model.scad` |
|
|
72
|
+
| `Union` | CSG union of all children (like `union()` in SCAD) |
|
|
73
|
+
| `Cube` / `Sphere` | Props match SCAD: `size`, `center`, `r`, `$fn`, etc. |
|
|
63
74
|
|
|
64
75
|
### Run and write the `.scad` file
|
|
65
76
|
|
|
66
77
|
Run your entry file with [tsx](https://github.com/privatenumber/tsx) so Node can execute the `.tsx`. The `.scad` file is written to the **current working directory** when you call `root.render()`.
|
|
67
78
|
|
|
79
|
+
> **Note:** Node doesn’t run `.tsx` by itself. Use **tsx** or bundle with esbuild (see [Advanced](#advanced) for alternatives).
|
|
80
|
+
|
|
68
81
|
```bash
|
|
69
82
|
npx tsx main.tsx
|
|
70
83
|
```
|
|
@@ -75,16 +88,18 @@ Watch mode (re-run on save):
|
|
|
75
88
|
npx tsx watch main.tsx
|
|
76
89
|
```
|
|
77
90
|
|
|
78
|
-
|
|
91
|
+
The path you pass to `createRoot()` is relative to the current working directory.
|
|
79
92
|
|
|
80
93
|
### View the result
|
|
81
94
|
|
|
82
95
|
- Open the generated `.scad` file in [OpenSCAD](https://openscad.org/) to preview, export STL, or tweak.
|
|
83
96
|
- Or import the `.scad` (or an exported STL) into your slicer for 3D printing.
|
|
84
97
|
|
|
98
|
+
---
|
|
99
|
+
|
|
85
100
|
## Advanced
|
|
86
101
|
|
|
87
|
-
To write to a custom path or get the SCAD string in memory instead of using `createRoot(path)`, use
|
|
102
|
+
To write to a custom path or get the SCAD string in memory instead of using `createRoot(path)`, use `createContainer()`, `render()`, and `toScad()`:
|
|
88
103
|
|
|
89
104
|
```jsx
|
|
90
105
|
import { createContainer, render, toScad, Cube, Sphere, Union } from "@react-scad/core";
|
|
@@ -104,6 +119,10 @@ writeFileSync("out/model.scad", scadCode);
|
|
|
104
119
|
// or use scadCode however you like
|
|
105
120
|
```
|
|
106
121
|
|
|
122
|
+
Then run with `npx tsx main.tsx` or bundle with esbuild and run with Node.
|
|
123
|
+
|
|
124
|
+
---
|
|
125
|
+
|
|
107
126
|
## Primitives (SCAD coverage)
|
|
108
127
|
|
|
109
128
|
All listed SCAD primitives and operations are implemented. Prop names follow SCAD where it makes sense (`r`, `h`, `size`, `center`, `$fn`, etc.).
|
|
@@ -138,6 +157,12 @@ All listed SCAD primitives and operations are implemented. Prop names follow SCA
|
|
|
138
157
|
| `surface()` | `Surface` | ✓ |
|
|
139
158
|
| `import()` | `Import` | ✓ |
|
|
140
159
|
|
|
160
|
+
### Missing anything?
|
|
161
|
+
|
|
162
|
+
> If you need a SCAD primitive or feature that isn’t listed here, open an [issue](https://github.com/react-scad/react-scad/issues/new) or a PR.
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
141
166
|
## Contributing
|
|
142
167
|
|
|
143
168
|
1. **Fork and clone** the repo, then install dependencies:
|
|
@@ -155,10 +180,10 @@ All listed SCAD primitives and operations are implemented. Prop names follow SCA
|
|
|
155
180
|
3. **Build and test** before committing:
|
|
156
181
|
```bash
|
|
157
182
|
pnpm run build
|
|
158
|
-
pnpm run dev
|
|
183
|
+
pnpm run dev
|
|
159
184
|
```
|
|
160
185
|
|
|
161
|
-
4. **Format and lint**
|
|
186
|
+
4. **Format and lint** your code:
|
|
162
187
|
```bash
|
|
163
188
|
pnpm run format
|
|
164
189
|
pnpm run lint
|
|
@@ -168,11 +193,15 @@ All listed SCAD primitives and operations are implemented. Prop names follow SCA
|
|
|
168
193
|
|
|
169
194
|
6. **Publishing** is done via GitHub Actions on push to `main`; no need to publish from a PR.
|
|
170
195
|
|
|
196
|
+
---
|
|
197
|
+
|
|
171
198
|
## Acknowledgements
|
|
172
199
|
|
|
173
200
|
- [React](https://react.dev/) and the [React reconciler](https://github.com/facebook/react/tree/main/packages/react-reconciler) for the rendering model that makes this approach possible.
|
|
174
201
|
- [OpenSCAD](https://openscad.org/) for the SCAD language and documentation.
|
|
175
202
|
|
|
203
|
+
---
|
|
204
|
+
|
|
176
205
|
## License
|
|
177
206
|
|
|
178
207
|
MIT
|