5fea49a980
- Update Vitest `cache.dir` to be scoped to each project root to avoid collisions (same as what's already done for Vite) - Normalize Vite `cacheDir` to avoid trailing `/.` paths for root projects - Fix Remix & Storybook Vite `cacheDir` generation <!-- Please make sure you have read the submission guidelines before posting an PR --> <!-- https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr --> <!-- Please make sure that your commit message follows our format --> <!-- Example: `fix(nx): must begin with lowercase` --> ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #21775
8.6 KiB
Add a New Solid Project
The code for this example is available on GitHub:
{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/solidjs" /%}
Supported Features
Because we are not using an Nx plugin for Solid, there are a few items we'll have to configure manually. We'll have to configure our own build system. There are no pre-created Solid-specific code generators. And we'll have to take care of updating any framework dependencies as needed.
{% pill url="/features/run-tasks" %}✅ Run Tasks{% /pill %} {% pill url="/features/cache-task-results" %}✅ Cache Task Results{% /pill %} {% pill url="/ci/features/remote-cache" %}✅ Share Your Cache{% /pill %} {% pill url="/features/explore-graph" %}✅ Explore the Graph{% /pill %} {% pill url="/ci/features/distribute-task-execution" %}✅ Distribute Task Execution{% /pill %} {% pill url="/getting-started/editor-setup" %}✅ Integrate with Editors{% /pill %} {% pill url="/features/automate-updating-dependencies" %}✅ Automate Updating Nx{% /pill %} {% pill url="/features/enforce-module-boundaries" %}✅ Enforce Module Boundaries{% /pill %} {% pill url="/features/generate-code" %}🚫 Use Code Generators{% /pill %} {% pill url="/features/automate-updating-dependencies" %}🚫 Automate Updating Framework Dependencies{% /pill %}
Install Solid and Other Dependencies
{% tabs %} {% tab label="npm" %}
npm add solid-js
npm add -D solid-devtools vite-plugin-solid
nx add @nx/web
{% /tab %} {% tab label="yarn" %}
yarn add solid-js
yarn add -D solid-devtools vite-plugin-solid
nx add @nx/web
{% /tab %} {% tab label="pnpm" %}
pnpm add solid-js
pnpm add -D solid-devtools vite-plugin-solid
nx add @nx/web
{% /tab %} {% /tabs %}
Create an Application
{% callout type="note" title="Directory Flag Behavior Changes" %}
The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details.
{% /callout %}
We'll start with a web application and then tweak the settings to match what we need. Add a new web application to your workspace with the following command:
nx g @nx/web:app my-solid-app --directory=apps/my-solid-app --bundler=vite
The @nx/web:app generator will create some files that are unnecessary for our Solid application.
The files and folders to be deleted are:
apps/my-solid-app/public/apps/my-solid-app/src/app/apps/my-solid-app/src/main.tsapps/my-solid-app/src/styles.cssapps/my-solid-app/.babelrc
Turn the Application into a Solid Application
Now we'll create the files that are necessary to turn our application into a Solid application.
Add the following files
import type { Component } from 'solid-js';
const App: Component = () => {
return (
<div>
<header>
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
href="https://github.com/solidjs/solid"
target="_blank"
rel="noopener noreferrer"
>
Learn Solid Now
</a>
</header>
</div>
);
};
export default App;
/* @refresh reload */
import { render } from 'solid-js/web';
import App from './App';
const root = document.getElementById('root');
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
'Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?'
);
}
render(() => <App />, root!);
Update the following files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="src/index.tsx" type="module"></script>
</body>
</html>
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';
// import devtools from 'solid-devtools/vite';
import viteTsConfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
cacheDir: '../../node_modules/.vite/apps/my-solid-app',
server: {
port: 3000,
},
build: {
target: 'esnext',
},
plugins: [
viteTsConfigPaths({
root: '../../',
}),
/*
Uncomment the following line to enable solid-devtools.
For more info see https://github.com/thetarnav/solid-devtools/tree/main/packages/extension#readme
*/
// devtools(),
solidPlugin(),
],
// Uncomment this if you are using workers.
// worker: {
// plugins: [
// viteTsConfigPaths({
// root: '../../',
// }),
// ],
// },
test: {
globals: true,
cache: {
dir: '../../node_modules/.vitest/apps/my-solid-app',
},
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
},
});
{
"extends": "../../tsconfig.base.json",
"files": [],
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"jsx": "preserve",
"jsxImportSource": "solid-js",
"strict": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true,
"types": ["vite/client", "vitest"]
},
"include": ["src"],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
You can now run nx serve my-solid-app and your Solid application can be viewed in your browser!
Create a Library
{% callout type="note" title="Directory Flag Behavior Changes" %}
The command below uses the as-provided directory flag behavior, which is the default in Nx 16.8.0. If you're on an earlier version of Nx or using the derived option, omit the --directory flag. See the as-provided vs. derived documentation for more details.
{% /callout %}
Let's create a library that our Solid application is going to consume. To create a new library, install the @nx/js
package and run:
nx g @nx/js:lib my-lib --directory=libs/my-lib
Once the library is created, update the following files.
Rename libs/my-lib/src/lib/my-lib.ts -> libs/my-lib/src/lib/my-lib.tsx, then edit the contents to:
export function MyLibComponent(props: { name: string }) {
return <h1>Hello {props.name} from MyLib</h1>;
}
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"module": "commonjs",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vitest"]
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}
import type { Component } from 'solid-js';
import { MyLibComponent } from '@acme/my-lib';
const App: Component = () => {
return (
<div>
<header>
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<MyLibComponent name={'there'} />
<a
href="https://github.com/solidjs/solid"
target="_blank"
rel="noopener noreferrer"
>
Learn Solid Now
</a>
</header>
</div>
);
};
export default App;
Now when you serve your application, you'll see the content from the library being displayed.