SolidJS Compiler for Meteor
This package enables full use of the SolidJS compiler, including these key features:
- SSR support (via
ssr: true
) - Server-only rendering (via
hydratable: false
) - Applying to just a subset of files, for mixed React + SolidJS projects
(via
match
andignore
options).
Usage
The edemaine:solid
package replaces the standard Meteor modules
ecmascript
and typescript
.
To install it, run the following commands within your Meteor project:
meteor remove ecmascript typescript meteor add edemaine:solid
This package should support
all the same ECMAScript features from
the ecmascript
package,
and all the same TypeScript features from
the typescript
package.
Upgrades to TypeScript happen in the babel-compiler
package, so this package
will need to be upgraded occasionally to depend on the latest babel-compiler
(via api.versionsFrom
).
Options
This package can be configured by adding a solid
property to package.json
.
Here is a complete example with all the possible options:
1{ 2 "solid": { 3 "ssr": true, 4 "hydratable": true, 5 "match": ["**/*.tsx", "**/*.jsx"], 6 "ignore": "react/**", 7 "verbose": true 8 } 9}
ssr
(default: false)
The default setup just supports client-side render
.
Server code doesn't use the SolidJS compiler at all.
If you want to use server-side rendering, set this to true
.
The same file will be compiled differently on client and server
to enable server-side rendering + client-side hydration.
hydratable
(default: true)
If ssr
is turned it, then the assumption is that you want to hydrate on
the client too. If you rather want to render only on the server side, you
can set hydratable
to false
. This will avoid running the compiler on
client code, and sets the server-code compiler to non-hydratable mode.
match
(default: everything)
To only apply the SolidJS compiler to certain files,
specify one or more paths or
micromatch patterns
in match
.
Paths are relative to the project root without a leading slash; for example,
imports/ui/filename.jsx
or lib/filename.js
.
ignore
(default: nothing)
To prevent applying the SolidJS compiler to certain files,
specify one or more paths or
micromatch patterns
in ignore
.
Paths are relative to the project root without a leading slash; for example,
imports/ui/filename.jsx
or lib/filename.js
.
If you specify both match
and ignore
, then ignore
overrides match
:
the set of compiled files consists of those matching match
minus
those matching ignore
.
Any files not passed through the SolidJS compiler are processed in the standard Meteor way, which is to enable React.
verbose
(default: false)
It can be hard to tell whether your configuration is applying the compiler
to the right files with the right options. Setting verbose
to true
will report messages like this:
react/main.tsx on client using React client/main.tsx on client using Solid with Babel preset ["solid",{"generate":"dom","hydratable":true}] client/main.tsx on server using Solid with Babel preset ["solid",{"generate":"ssr","hydratable":true}]