Custom renderer for SolidJS using [your API here!]. Write JSX, render directly to [whatever you want!], no DOM required (unless you want!).
This is setup with a Semantic Release workflow based off Conventional Commits. And it's automatically released to Github and NPM using Github Actions.
- Follow the instructions below to get the dev server up.
- Check out the renderer inside
packages/solid-canvaskit-renderer
. This where the action happens like creating new elements, setting props, etc. I setupconsole.log
in a few places to give you an idea of what you get to work with. - Your goal should be to take "elements" (usually strings from element tags e.g.
<yourElement>
) and render those somehow (ThreeJS, CanvasKit, or even custom DOM).
- You don't need to implement all the renderer methods! Most are kinda optional, especially if you don't have things like parent/child relationships between components.
- Similarly, you don't necessarily need a (virtual or not) DOM/node tree. If your graphics API is a flat scene graph, you don't need to worry about all the "parent"/"child" methods. If you do need a virtual DOM, I have a
VNode
class that has most methods you'll need. - SolidJS goes through the component tree as a giant call stack of functions, first starting with
createElement
, theninsertBefore
, etc.
There's a Vite website under packages/demo
to be a playground to develop and test the library.
- Fork/clone this repo:
https://github.com/whoisryosuke/solid-canvaskit-renderer.git
- Install dependencies:
yarn
- Start the Vite playground:
yarn dev
yarn build
This runs the tsup
process for one package/module. Check the package.json
and packages/input-manager/package.json
for more info.
This repo should automatically release to Github and tag the release when you commit to main
, alpha
, or beta
branches (change these in package.json
).
You can learn more about the CI/CD workflow in the Github Actions folder.
To setup NPM releases, you need to add your token to Github as an ENV var.
- Make sure you've created a new repo for your package (not a fork).
- Go to your repo settings.
- Go to Environments
- Create a new one called
production
- Add a
NPM_TOKEN
ENV with your token from NPM.
If you use VSCode, Prettier should run each time you save a compatible file.
If you don't like this, go to
.vscode\settings.json
and disable there (or you can do it via your own VSCode settings).
yarn lint
runs ESLint and Prettier, automatically formats files and rewrites them. Make sure to stage your code before running just in case.