SolidJS Compiler for Meteor
This package enables full use of the SolidJS JSX compiler, including these key features:
- Server-Side Rendering 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). - JavaScript (JSX), TypeScript (TSX), and CoffeeScript (CSX) input files
A demo repository
illustrates the use of this package in a Meteor project.
Related, the
solid-meteor-data
library
provides tools for combining SolidJS and Meteor reactivity, and
edemaine:solid-meteor-helper
enables use of SolidJS components within Blaze templates
(e.g. for gradual transitions from Blaze).
Usage
The edemaine:solid
package replaces the standard Meteor modules
ecmascript
, typescript
, and coffeescript
.
To install it, run the following commands within your Meteor project:
meteor remove ecmascript typescript coffeescript meteor add edemaine:solid
Additionally, to enable CoffeeScript support, you should explicitly add
coffeescript-compiler
(which coffeescript
also depends on):
meteor add coffeescript-compiler
In addition, you must install the SolidJS compiler via NPM:
npm install -D babel-preset-solid
The edemaine:solid
package should support
all the same ECMAScript features from
the ecmascript
package,
all the same TypeScript features from
the typescript
package,
and the same CoffeeScript features from
the coffeescript
package.
Upgrades to TypeScript happen in
the babel-compiler
package,
and upgrades to CoffeeScript happen in
the coffeescript-compiler
package
so you should be able to update these by depending on the latest version
within your Meteor application.
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 (SSR), 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.
If you want to use react-fast-refresh
, you need to manually add it via
meteor add react-fast-refresh
(whereas ecmascript
adds it for you).
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}]
Alternatives
If you just want to use client-side SolidJS, with no SSR, and you do not need
to co-exist with React code, you do not need this package.
Instead, it's enough to add a babel
property to your package.json
,
along the following lines:
1{ 2 "babel": { 3 "presets": [ 4 "es2015", 5 "solid" 6 ] 7 } 8}
Indeed, this is how
early versions of solid-meteor-demo
worked.