Skip to content

Commit

Permalink
update universal readme
Browse files Browse the repository at this point in the history
  • Loading branch information
ryansolid committed Jul 25, 2023
1 parent b8a78d2 commit 039cf60
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 10 deletions.
5 changes: 5 additions & 0 deletions .changeset/serious-donuts-hope.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"solid-js": patch
---

update universal runtime readme
32 changes: 22 additions & 10 deletions packages/solid/universal/README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,28 @@
# Solid Universal

This contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from the vite-plugin-solid.
This contains the means to create the runtime for a custom renderer for Solid. This can enable using Solid to render to different platforms like native mobile and desktop, canvas or WebGL, or even the terminal. It relies on custom compilation from `babel-preset-solid` and exporting the result of `createRenderer` at a referenceable location.

## Example

### Babel

To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your babelrc as:
```json
{
"presets": [
[
"babel-preset-solid",
{
"moduleName": "solid-custom-dom",
"generate": "universal"
}
]
]
}
```

### Vite

To use a custom renderer available in the (fictional) `solid-custom-dom` package you'd configure your vite config as:
```js
import { defineConfig } from 'vite';
Expand Down Expand Up @@ -38,7 +57,8 @@ export const {
insert,
spread,
setProp,
mergeProps
mergeProps,
use
} = createRenderer({
createElement(string) {
return document.createElement(string);
Expand Down Expand Up @@ -99,12 +119,4 @@ function App() {
render(() => <App />, mountNode)
```

You may also run into an issue where you need to export a use function like so:

```
export const use = function(node) {
return node;
}
```

> Note: For TypeScript support of non-standard JSX you will need to provide your own types at a jsx-runtime entry on your package so that it can be set as the `jsxImportSource`. If mixing and matching different JSX implementations you will need use the per file pragmas.

0 comments on commit 039cf60

Please sign in to comment.