├── LICENSE ├── README.md ├── index-site ├── .gitignore ├── jsconfig.json ├── package-lock.json ├── package.json └── src │ ├── assets │ ├── favicon.svg │ ├── icons.svg │ └── preact-logo.png │ ├── index.html │ ├── index.jsx │ ├── styles │ ├── global.css │ └── twind.config.js │ └── themeToggle.js └── projects ├── buildless-spreadsheet ├── .gitignore ├── README.md ├── jsconfig.json ├── package-lock.json ├── package.json ├── scripts │ └── build.js └── src │ ├── assets │ └── preact.svg │ ├── index.html │ ├── spreadsheet-data.js │ ├── spreadsheet.js │ ├── style.css │ └── utils.js ├── spa-blog-markdown ├── .gitignore ├── README.md ├── content │ └── posts │ │ ├── introducing-signals.md │ │ ├── preact-x.md │ │ ├── prerendering-preset-vite.md │ │ ├── signal-boosting.md │ │ └── simplifying-islands-arch.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── plugins │ ├── blog-manifest-plugin.js │ └── precompile-markdown.js ├── public │ ├── blog-images │ │ ├── context-chaos.png │ │ ├── signal-boosting-01.png │ │ ├── signal-boosting-01b.png │ │ ├── signal-boosting-02.png │ │ ├── signal-boosting-03.png │ │ ├── signal-boosting-04.png │ │ ├── signals-update.png │ │ ├── state-updates.png │ │ └── virtual-dom-vs-signals-update.png │ └── preact.svg ├── src │ ├── components │ │ └── Header.jsx │ ├── index.jsx │ ├── lib │ │ ├── use-content.js │ │ └── utils.js │ ├── pages │ │ ├── BlogPost │ │ │ ├── index.jsx │ │ │ └── style.css │ │ ├── Home │ │ │ ├── index.jsx │ │ │ └── style.css │ │ └── _404.jsx │ └── style.css └── vite.config.js └── spa-blog-static-markdown ├── .gitignore ├── README.md ├── content └── posts │ ├── introducing-signals.md │ ├── preact-x.md │ ├── prerendering-preset-vite.md │ ├── signal-boosting.md │ └── simplifying-islands-arch.md ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── plugins ├── blog-manifest-plugin.js └── precompile-markdown.js ├── public ├── blog-images │ ├── context-chaos.png │ ├── signal-boosting-01.png │ ├── signal-boosting-01b.png │ ├── signal-boosting-02.png │ ├── signal-boosting-03.png │ ├── signal-boosting-04.png │ ├── signals-update.png │ ├── state-updates.png │ └── virtual-dom-vs-signals-update.png └── preact.svg ├── src ├── components │ └── Header.jsx ├── index.jsx ├── lib │ ├── use-content.js │ └── utils.js ├── pages │ ├── BlogPost │ │ ├── index.jsx │ │ └── style.css │ ├── Home │ │ ├── index.jsx │ │ └── style.css │ └── _404.jsx └── style.css └── vite.config.js /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Ryan Christian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Preact Demos for various types of applications 2 | 3 | The goal for this repo is to provide some examples of how you might build apps in an approachable "Preact way". This is not necessarily a set of best practices or a prescribed way to build apps, nor will they be hyper-optimized, but hopefully it serves as a source of inspiration for how you might build similar apps. As such, we'll tend to take an idea, like a blog, and show a couple variations of it to represent some of the variations you might need in the real world. 4 | 5 | How you build your apps to support your needs might differ considerably from these examples, but that's okay! You cannot approach web-dev with a one-size-fits-all mentality, there is no such thing as a "Jack of all trades" here. If you don't cater your tooling and your methods to the specific needs of the project, you're going to deliver sub-optimal results to your users. 6 | 7 | Will add to this over time, and might migrate over to the Preact org too. 8 | 9 | - Blog 10 | - [SPA Blog with Precompiled Markdown](./projects/spa-blog-markdown) 11 | - [SPA Blog with Static Precompiled Markdown](./projects/spa-blog-static-markdown) 12 | - Spreadsheet App 13 | - [Buildless Spreadsheet](./projects/buildless-spreadsheet) 14 | 15 | Please feel free to open an issue if there are any questions! 16 | 17 | ## License 18 | 19 | [MIT](./LICENSE) 20 | -------------------------------------------------------------------------------- /index-site/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | build 12 | dist 13 | dist-ssr 14 | *.local 15 | 16 | # Editor directories and files 17 | .vscode/* 18 | !.vscode/extensions.json 19 | .idea 20 | .DS_Store 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | -------------------------------------------------------------------------------- /index-site/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "noEmit": true, 7 | "allowJs": true, 8 | "checkJs": true, 9 | "jsx": "react-jsx", 10 | "jsxImportSource": "preact" 11 | }, 12 | "include": ["node_modules/vite/client.d.ts", "**/*"] 13 | } 14 | -------------------------------------------------------------------------------- /index-site/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "type": "module", 4 | "scripts": { 5 | "serve:dev": "sovereign", 6 | "build": "sovereign build --strip-entry", 7 | "serve:prod": "sovereign serve", 8 | "format": "prettier --write --ignore-path .gitignore ." 9 | }, 10 | "dependencies": { 11 | "@rschristian/intrepid-design": "^0.1.6", 12 | "@rschristian/twind-preact-iso": "^0.5.1", 13 | "@twind/core": "^1.1.3", 14 | "@twind/preset-tailwind": "^1.1.4", 15 | "preact": "^10.26.6", 16 | "preact-iso": "^2.9.1" 17 | }, 18 | "devDependencies": { 19 | "@sovereignjs/core": "^0.1.5", 20 | "preact-render-to-string": "^6.5.13", 21 | "prettier": "^2.8.8", 22 | "prettier-config-rschristian": "^0.1.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /index-site/src/assets/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /index-site/src/assets/icons.svg: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 35 | 36 | 37 | 38 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 67 | 68 | 69 | 70 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /index-site/src/assets/preact-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rschristian/preact-project-demos/2054a170f1945cf09aca5285d4ce2faede0a383b/index-site/src/assets/preact-logo.png -------------------------------------------------------------------------------- /index-site/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Preact Project Demos 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /index-site/src/index.jsx: -------------------------------------------------------------------------------- 1 | import { Root, Main, Header, Footer } from '@rschristian/intrepid-design'; 2 | import { withTwind } from '@rschristian/twind-preact-iso'; 3 | 4 | function App() { 5 | return ( 6 | 7 |
8 | 13 | 18 | 23 | 24 |
25 |
26 |

Preact Demos

27 |

28 | A set of example apps showing how you may build in an approachable "Preact way". This is not a set of best practices or a prescribed way to build apps, nor will they be hyper-optimized, but hopefully it will serves as a source of inspiration 29 |
30 |
31 | As such, we'll tend to take an idea, like a blog, and show a couple variations of it to represent some of the variations you might need in the real world. 32 |
33 |
34 | Time permitting, we'll add to this list over time. 35 |

36 | 37 | 38 | 44 | 45 | 51 | 52 | 53 | 54 | 60 | 61 |
62 |