Pierstoval · charlyisidore · Aug 26, 2023 · Aug 26, 2023 · Aug 26, 2023 · Sep 11, 2023
diff --git a/apps/solid/.gitignore b/apps/solid/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/apps/solid/README.md b/apps/solid/README.md
@@ -0,0 +1,34 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
diff --git a/apps/solid/index.html b/apps/solid/index.html
@@ -0,0 +1,16 @@
+<!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" />
+    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
+    <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>
diff --git a/apps/solid/package.json b/apps/solid/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "solid-devtools": "^0.27.3",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-solid": "^2.7.0"
+  },
+  "dependencies": {
+    "solid-js": "^1.7.6"
+  }
+}
diff --git a/apps/solid/src/App.css b/apps/solid/src/App.css
@@ -0,0 +1,56 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: #213547;
+  background-color: #ffffff;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.4em 0.6em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #d5d5d5;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
diff --git a/apps/solid/src/App.tsx b/apps/solid/src/App.tsx
@@ -0,0 +1,45 @@
+import type { Component } from 'solid-js';
+import { createSignal, For } from 'solid-js';
+import todoStore from './lib/todoStore';
+import './App.css';
+
+type Todo = { text: string };
+
+const App: Component = () => {
+  let input: HTMLInputElement | undefined;
+  const [newTodo, setNewTodo] = createSignal('');
+  const { todos, setTodos } = todoStore;
+
+  function addTodo() {
+    if (!newTodo()) {
+      return;
+    }
+    setTodos([...todos(), {text: newTodo()}]);
+    setNewTodo('');
+    input?.focus();
+  }
+
+  function removeTodo(todo: Todo) {
+    setTodos(todos().filter(t => t !== todo));
+  }
+
+  return (
+    <div id="app">
+      <input ref={input} type="text" value={newTodo()} onInput={({target}) => setNewTodo(target.value)} placeholder="Add a new element"/>
+      <button type="button" disabled={newTodo().length === 0} onClick={addTodo}>Add</button>
+
+      <ul>
+        <For each={todos()}>
+          {(todo) => (
+            <li>
+                {todo.text}
+                <button onClick={() => removeTodo(todo)}>x</button>
+            </li>
+          )}
+        </For>
+      </ul>
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/solid/src/assets/favicon.ico b/apps/solid/src/assets/favicon.ico
diff --git a/apps/solid/src/index.css b/apps/solid/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/apps/solid/src/index.tsx b/apps/solid/src/index.tsx
@@ -0,0 +1,15 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+
+import './index.css';
+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!);
diff --git a/apps/solid/src/lib/todoStore.ts b/apps/solid/src/lib/todoStore.ts
@@ -0,0 +1,34 @@
+import { createEffect, createRoot, createSignal } from 'solid-js';
+
+type Todo = { text: string };
+
+const storageKey = 'todoStore';
+
+function getBaseValue(): Todo[] {
+  let value = '[]';
+  if (typeof window !== 'undefined') {
+    value = window?.localStorage?.getItem(storageKey) || '[]';
+  }
+  return JSON.parse(value);
+}
+
+function saveValue(values: Todo[]) {
+  if (typeof window === 'undefined') {
+    console.warn('Window variable is undefined, cannot save values.');
+    return;
+  }
+
+  window.localStorage.setItem(storageKey, JSON.stringify(values || []));
+}
+
+function createTodoStore() {
+  const [todos, setTodos] = createSignal(getBaseValue());
+
+  createEffect(() => {
+    saveValue(todos());
+  });
+
+  return { todos, setTodos };
+}
+
+export default createRoot(createTodoStore);
diff --git a/apps/solid/tsconfig.json b/apps/solid/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true
+  }
+}
diff --git a/apps/solid/vite.config.ts b/apps/solid/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import solidPlugin from 'vite-plugin-solid';
+// import devtools from 'solid-devtools/vite';
+
+export default defineConfig({
+  plugins: [
+    /* 
+    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(),
+  ],
+  server: {
+    port: 3000,
+  },
+  build: {
+    target: 'esnext',
+  },
+});