Open zejji opened 3 years ago
I see the desire but this repo is just where I am trying ideas. There is still a lot of experimental stuff I'm going to be working on, including streaming HTML, partial hydration etc... It's a place for me to work. I pulled it out of the main repo as I wanted a place to try stuff without messing with things there. I can probably look at updating the examples in solid-ssr. Although it sounds more like you'd be looking for a simple starter template.
As for the issues you hit. In general, using Babel Preset TypeScript and avoiding the TS compiler except for type checking is infinitely simpler.
@ryansolid - Thanks, I will give that a try with Babel Preset TypeScript. 😃
As you say, a starter template will be much appreciated once it's ready, but I know it's a huge amount of work to finalize and likely a while off. The main thing I'm trying to achieve at the moment is to start productive work - I'm very happy to port over the code to the starter template later - but at an absolute minimum I know the solution will need to work with both SSR and TypeScript (and ideally Tailwind also). Hot reload and other developer niceties are not essential at this stage. 😉
However, I'm a little wary of trying to start with the current Create Solid template and to retrofit SSR/TS later once a significant amount of work has been done, as I suspect that will be trickier.
I'd start with Vite then..maybe something like: https://github.com/amoutonbrady/vite-ssr-solid. I can't remember if that one was in working condition. This is probably worth a look too: https://github.com/amoutonbrady/solid-hackernews
@ryansolid - Thanks, I will check those repos out
Just to note that I finally got the project to build successfully using TypeScript. The key was ensuring that the TypeScript was correctly processed by the node-resolve
and babel
plugins. This required the appropriate TypeScript file extensions (.ts
and .tsx
) to be added to the extensions
plugin option (see this issue for details).
My final rollup.config.js
file was as follows:
import path from "path";
import { DEFAULTS, nodeResolve } from "@rollup/plugin-node-resolve";
import babel from "@rollup/plugin-babel";
import json from "@rollup/plugin-json";
import copy from "rollup-plugin-copy";
import { terser } from "rollup-plugin-terser";
import manifest from "rollup-route-manifest";
import typescript from "@rollup/plugin-typescript";
import { DEFAULT_EXTENSIONS } from '@babel/core';
const typescriptExtensions = [
'.ts',
'.tsx'
];
const nodeResolveExtensions = [
...(DEFAULTS.extensions),
...typescriptExtensions
];
const babelExtensions = [
...DEFAULT_EXTENSIONS,
...typescriptExtensions
];
export default [
{
input: "src/index.tsx",
output: [
{
dir: "dist/public/js",
format: "esm",
}
],
preserveEntrySignatures: false,
plugins: [
nodeResolve({
extensions: nodeResolveExtensions,
exportConditions: ["solid"]
}),
typescript(),
babel({
extensions: babelExtensions,
babelHelpers: "bundled",
presets: [["solid", { generate: "dom", hydratable: true }]]
}),
copy({
targets: [
{
src: ["static/*"],
dest: "dist/public"
}
]
}),
manifest({
inline: false,
merge: false,
publicPath: "/js/",
routes: file => {
file = file.replace(path.join(__dirname, "src"), "").replace(/\.[tj]sx?$/, "");
if (!file.includes("/pages/")) return "*"; // commons
let name = "/" + file.replace("/pages/", "").toLowerCase();
return name === "/home" ? "/" : name;
}
}),
terser()
]
},
{
input: "index.js",
output: [
{
dir: "dist/lib",
format: "cjs",
}
],
external: [
"solid-js",
"solid-js/web",
"path",
"express",
"stream",
"compression",
"node-fetch"
],
plugins: [
nodeResolve({
extensions: nodeResolveExtensions,
preferBuiltins: true,
exportConditions: ["solid"]
}),
typescript(),
babel({
extensions: babelExtensions,
babelHelpers: "bundled",
presets: [["solid", { generate: "ssr", hydratable: true }]]
}),
json()
],
preserveEntrySignatures: false
}
];
@zejji do you have a repo with the rest of the files/npm modules needed to get typescript working here?
I would love to see that as well!
For the same reasons noted in this discussion - principally maintainability once a project becomes larger than a toy example - it would be helpful to convert this repository to use TypeScript.
I have attempted to do the conversion myself, by adding the @rollup/plugin-typescript plugin and using a tsconfig.json file based on the Create Solid TypeScript starter, but have been unable to get the build to complete despite spending numerous hours tweaking the rollup and tsconfig options.
Specifically, I get one of two errors.
If the acorn-jsx plugin is enabled as described here, I get the following error:
If the acorn-jsx plugin is not enabled, I get the following error (one which spawned a very long, and unresolved, GitHub issue here):
If anyone happens to have a working SSR/TypeScript configuration, I think it would be very helpful to include it in the repo! 😃
I'm conscious that a Solid starter kit is in the works, which is likely to include both SSR and TypeScript support, but adding a basic example of TypeScript support to this repo would make it possible to continue working on an SSR/TypeScript Solid solution at the present time, pending completion of that project. This would serve to unblock current development and facilitate porting over later.