✨ Aliasing solid-js for solid-js/dev in dev mode

solidjs · Feb 12, 2021 · 4ef6a4f · 4ef6a4f
1 parent 6c37c39
commit 4ef6a4f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/playground/index.tsx b/playground/index.tsx
@@ -1,8 +1,8 @@
 import { createSignal, lazy } from 'solid-js';
-import { render } from 'solid-js/web';
 import { Link } from 'solid-app-router';
 import { MetaProvider } from 'solid-meta';
 import { Router, Route, RouteDefinition } from 'solid-app-router';
+import { createApp } from 'solid-utils';
 
 import Home from './pages';
 
@@ -23,23 +23,14 @@ const App = () => {
   return (
     <>
       <Link href="/">Home</Link>
-    <Link href="/about">About!!!</Link>
-    <Route />
+      <Link href="/about">About!!!</Link>
+      <Route />
       <button onClick={() => setCount(count() + 1)}>{count()}</button>
     </>
   );
 };
 
-const dispose = render(
-  () => (
-    <Router routes={routes}>
-     <MetaProvider>
-    <App />
-     </MetaProvider>
-    </Router>
-  ),
-  document.getElementById('app'),
-);
+const dispose = createApp(App).use(MetaProvider).use(Router, { routes }).mount('#app');
 
 if (import.meta.hot) {
   import.meta.hot.accept();

diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,9 @@
-import { transformAsync, TransformOptions } from '@babel/core';
-import solid from 'babel-preset-solid';
 import { Plugin } from 'vite';
+import solid from 'babel-preset-solid';
+import { transformAsync, TransformOptions } from '@babel/core';
 
 interface Options {
+  dev: boolean;
   moduleName: string;
   builtIns: string[];
   delegateEvents: boolean;
@@ -14,13 +15,20 @@ interface Options {
   generate: 'dom' | 'ssr';
 }
 
-export default function solidPlugin(options?: Partial<Options>): Plugin {
+export default function solidPlugin(options: Partial<Options> = {}): Plugin {
   let needHmr = false;
 
   return {
     name: 'solid',
 
-    config() {
+    config(_, { command }) {
+      const replaceDev = options.dev !== false;
+
+      const alias =
+        command === 'serve' && replaceDev
+          ? [{ find: /^solid-js$/, replacement: 'solid-js/dev' }]
+          : [];
+
       return {
         /**
          * We only need esbuild on .ts or .js files.
@@ -29,9 +37,10 @@ export default function solidPlugin(options?: Partial<Options>): Plugin {
         esbuild: { include: /\.ts$/ },
         resolve: {
           dedupe: ['solid-js', 'solid-js/web'],
+          alias,
         },
         optimizeDeps: {
-          include: ['solid-js/web'],
+          include: ['solid-js/dev', 'solid-js/web'],
         },
       };
     },