Merge pull request #34 from ralphsmith80/modern-solid

Modern solid
tsparticles · Oct 7, 2024 · dc71cc1 · dc71cc1
2 parents f6c94e1 + bdde169
commit dc71cc1
Show file tree

Hide file tree

Showing 39 changed files with 6,617 additions and 15,659 deletions.
diff --git a/apps/solid/.gitignore b/apps/solid/.gitignore
@@ -1,23 +1,3 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules
+dist
+.DS_Store
diff --git a/apps/solid/CHANGELOG.md b/apps/solid/CHANGELOG.md
diff --git a/apps/solid/README.md b/apps/solid/README.md
@@ -1,52 +1,51 @@
-This project was bootstrapped with [Create Solid](https://github.com/ryansolid/create-solid). Create Solid is a Fork of Create React App.
 
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
+# Example App
 
-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>
-You will also see any lint errors in the console.
+This project was bootstrapped by following the
+[Solid Getting Started](https://www.solidjs.com/guides/getting-started) guide
+using to following command.
 
-### `npm test`
+```bash
+npx degit solidjs/templates/ts solid
+```
 
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+## Usage
 
-### `npm run build`
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via
+`pnpm up -Lri`.
 
-Builds the app for production to the `build` folder.<br>
-It correctly bundles Solid in production mode and optimizes the build for the best performance.
+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.
 
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+```bash
+npm install # or pnpm install or yarn install
+```
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Learn more on the [Solid Website](https://solidjs.com) and come chat with us
+on our [Discord](https://discord.com/invite/solidjs)
 
-### Code Splitting
-
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
-
-### Analyzing the Bundle Size
+## Available Scripts
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+In the project directory, you can run:
 
-### Making a Progressive Web App
+### `npm run dev` or `npm start`
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 
-### Advanced Configuration
+The page will reload if you make edits.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+### `npm run build`
 
-### Deployment
+Builds the app for production to the `dist` folder.
+It correctly bundles Solid in production mode and optimizes the build for the
+best performance.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+The build is minified and the filenames include the hashes.
+Your app is ready to be deployed!
 
-### `npm run build` fails to minify
+## Deployment
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+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
@@ -1,31 +1,25 @@
 {
-  "name": "@tsparticles/solid-demo",
-  "version": "3.0.0",
-  "private": true,
-  "devDependencies": {
-    "@tsparticles/configs": "^3.0.3",
-    "@tsparticles/engine": "^3.0.3",
-    "@tsparticles/solid": "workspace:^",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "browserslist": "^4.22.2",
-    "component-register": "^0.8.3",
-    "solid-js": "^1.8.7",
-    "solid-scripts": "^0.0.61",
-    "tsparticles": "^3.0.3",
-    "typescript": "^5.0.0"
-  },
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "description": "",
   "scripts": {
-    "start": "env NODE_OPTIONS=--openssl-legacy-provider solid-scripts start",
-    "build": "env NODE_OPTIONS=--openssl-legacy-provider solid-scripts build",
-    "build:ci": "env NODE_OPTIONS=--openssl-legacy-provider solid-scripts build",
-    "test": "solid-scripts test"
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "solid-devtools": "^0.29.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.2"
   },
-  "browserslist": [
-    "Chrome 74",
-    "Firefox 63",
-    "Safari 11",
-    "Edge 17",
-    "Node 10"
-  ]
+  "dependencies": {
+    "@tsparticles/configs": "^3.5.0",
+    "@tsparticles/engine": "^3.5.0",
+    "@tsparticles/solid": "workspace:*",
+    "solid-js": "^1.8.11",
+    "tsparticles": "^3.5.0"
+  }
 }
diff --git a/apps/solid/public/favicon.ico b/apps/solid/public/favicon.ico
diff --git a/apps/solid/public/index.html b/apps/solid/public/index.html
diff --git a/apps/solid/public/manifest.json b/apps/solid/public/manifest.json
diff --git a/apps/solid/src/App.css b/apps/solid/src/App.css
diff --git a/apps/solid/src/App.test.tsx b/apps/solid/src/App.test.tsx
diff --git a/apps/solid/src/App.tsx b/apps/solid/src/App.tsx
@@ -1,45 +1,20 @@
-import logo from './logo.svg';
-import './App.css';
-import { loadFull } from "tsparticles";
 import configs from "@tsparticles/configs";
-import { createEffect, createSignal } from "solid-js";
+import type { Component } from 'solid-js';
+import { createSignal, Show } from "solid-js";
+import { loadFull } from "tsparticles";
 import Particles, { initParticlesEngine } from "@tsparticles/solid";
-import { Engine } from "@tsparticles/engine";
-
-function App() {
-    const [ init, setInit ] = createSignal<boolean>(false);
 
-    createEffect(() => {
-        if (init()) {
-            return;
-        }
+const App: Component = () => {
+  const init = initParticlesEngine(loadFull)
+  const [config, setConfig] = createSignal(configs.basic)
 
-        initParticlesEngine(async (engine: Engine) => {
-            await loadFull(engine);
-        }).then(() => {
-            setInit(true);
-        })
-    });
+  setTimeout(() => setConfig(configs.absorbers), 1000)
 
-    return (
-        <div class="App">
-            <header class="App-header">
-                <img src={logo} class="App-logo" alt="logo"/>
-                <p>
-                    Edit <code>src/App.tsx</code> and save to reload.
-                </p>
-                <a
-                    class="App-link"
-                    href="https://github.com/ryansolid/solid"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    Learn Solid
-                </a>
-            </header>
-            {init() && <Particles id="tsparticles" options={configs.basic}/>}
-        </div>
-    );
-}
+  return (
+    <Show when={init()}>
+      <Particles id="tsparticles" options={config()}/>
+    </Show>
+  );
+};
 
 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
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  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",
+  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
@@ -1,12 +1,15 @@
-import "solid-js";
+/* @refresh reload */
 import { render } from 'solid-js/web';
+
 import './index.css';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 
-render(App, document.getElementById('root') as Node);
+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?',
+  );
+}
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+render(() => <App />, root!);
diff --git a/apps/solid/src/logo.svg b/apps/solid/src/logo.svg