diff --git a/examples/basic/static-components/.gitignore b/examples/basic/static-components/.gitignore new file mode 100644 index 0000000..76add87 --- /dev/null +++ b/examples/basic/static-components/.gitignore @@ -0,0 +1,2 @@ +node_modules +dist \ No newline at end of file diff --git a/examples/basic/static-components/README.md b/examples/basic/static-components/README.md new file mode 100644 index 0000000..e8780d0 --- /dev/null +++ b/examples/basic/static-components/README.md @@ -0,0 +1,10 @@ +# Static Components + +A demo showing a simple site built with (non stateful) components using SolidJS + +Features: + +- CSS modules +- Solid components (non stateful) +- Global styling and custom props in `src/index.css` +- CSS Reset: https://piccalil.li/blog/a-modern-css-reset/ diff --git a/examples/basic/static-components/index.html b/examples/basic/static-components/index.html new file mode 100644 index 0000000..f98d294 --- /dev/null +++ b/examples/basic/static-components/index.html @@ -0,0 +1,20 @@ + + + + + + + + + Solid App + + + +
+ + + + diff --git a/examples/basic/static-components/package.json b/examples/basic/static-components/package.json new file mode 100644 index 0000000..6b65942 --- /dev/null +++ b/examples/basic/static-components/package.json @@ -0,0 +1,20 @@ +{ + "name": "vite-template-solid", + "version": "0.0.0", + "description": "", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "license": "MIT", + "devDependencies": { + "typescript": "^4.6.4", + "vite": "^2.9.9", + "vite-plugin-solid": "^2.2.6" + }, + "dependencies": { + "solid-js": "^1.4.2" + } +} diff --git a/examples/basic/static-components/src/App.module.css b/examples/basic/static-components/src/App.module.css new file mode 100644 index 0000000..4931613 --- /dev/null +++ b/examples/basic/static-components/src/App.module.css @@ -0,0 +1,3 @@ +.App { + text-align: center; +} diff --git a/examples/basic/static-components/src/App.tsx b/examples/basic/static-components/src/App.tsx new file mode 100644 index 0000000..233dd1c --- /dev/null +++ b/examples/basic/static-components/src/App.tsx @@ -0,0 +1,20 @@ +import type { Component } from 'solid-js'; + +import styles from './App.module.css'; +import { CardGrid } from './components/CardGrid'; +import { Navbar } from './components/Navbar'; +import { Title } from './components/Title'; + +const App: Component = () => { + return ( +
+ +
+ + <CardGrid /> + </main> + </div> + ); +}; + +export default App; diff --git a/examples/basic/static-components/src/assets/favicon.ico b/examples/basic/static-components/src/assets/favicon.ico new file mode 100644 index 0000000..b836b2b Binary files /dev/null and b/examples/basic/static-components/src/assets/favicon.ico differ diff --git a/examples/basic/static-components/src/components/CardGrid/CardGrid.module.css b/examples/basic/static-components/src/components/CardGrid/CardGrid.module.css new file mode 100644 index 0000000..9b3c678 --- /dev/null +++ b/examples/basic/static-components/src/components/CardGrid/CardGrid.module.css @@ -0,0 +1,39 @@ +.grid { + margin: 0 auto; + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + max-width: 800px; + margin-top: 3rem; +} + +.card { + margin: 1rem; + flex-basis: 45%; + padding: 1.5rem; + text-align: left; + color: inherit; + text-decoration: none; + border: 1px solid #eaeaea; + border-radius: 10px; + transition: color 0.15s ease, border-color 0.15s ease; +} + +.card:hover, +.card:focus, +.card:active { + color: var(--sLight-blue); + border-color: var(--sLight-blue); +} + +.card h3 { + margin: 0 0 1rem 0; + font-size: 1.5rem; +} + +.card p { + margin: 0; + font-size: 1.25rem; + line-height: 1.5; +} diff --git a/examples/basic/static-components/src/components/CardGrid/CardGrid.tsx b/examples/basic/static-components/src/components/CardGrid/CardGrid.tsx new file mode 100644 index 0000000..753b099 --- /dev/null +++ b/examples/basic/static-components/src/components/CardGrid/CardGrid.tsx @@ -0,0 +1,35 @@ +import styles from './CardGrid.module.css'; +export default function CardGrid() { + return ( + <div class={styles.grid}> + <a href="https://www.solidjs.com/" target="_new" class={styles.card}> + <h3>Documentation →</h3> + <p>Find comprehensive information about Solid features and API.</p> + </a> + + <a + href="https://www.solidjs.com/tutorial/introduction_basics" + target="_new" + class={styles.card} + > + <h3>Learn →</h3> + <p>Learn Solid through our interactive tutorial!</p> + </a> + + <a href="https://www.solidjs.com/examples/counter" target="_new" class={styles.card}> + <h3>Examples →</h3> + <p>Checkout our gallery of Solid example projects.</p> + </a> + + <a href="https://www.solidjs.com/examples/counter" target="_new" class={styles.card}> + <h3>Play →</h3> + <p>Visit the playground to test ideas and see Solid compiled output!</p> + </a> + + <a href="https://netlify.com" target="_new" class={styles.card}> + <h3>Deploy →</h3> + <p>Instantly deploy your Solid app to a public URL with Netlify.</p> + </a> + </div> + ); +} diff --git a/examples/basic/static-components/src/components/CardGrid/index.ts b/examples/basic/static-components/src/components/CardGrid/index.ts new file mode 100644 index 0000000..d0b271d --- /dev/null +++ b/examples/basic/static-components/src/components/CardGrid/index.ts @@ -0,0 +1 @@ +export { default as CardGrid } from './CardGrid'; diff --git a/examples/basic/static-components/src/components/Navbar/Navbar.module.css b/examples/basic/static-components/src/components/Navbar/Navbar.module.css new file mode 100644 index 0000000..a0973d3 --- /dev/null +++ b/examples/basic/static-components/src/components/Navbar/Navbar.module.css @@ -0,0 +1,16 @@ +.nav { + background-color: var(--sLight-blue); + padding: 1.5rem 3rem; +} + +.nav > div { + max-width: 800px; + margin: 0 auto; + display: flex; + justify-content: space-between; +} + +.logo { + width: 2.25rem; + pointer-events: none; +} diff --git a/examples/basic/static-components/src/components/Navbar/Navbar.tsx b/examples/basic/static-components/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..a23b031 --- /dev/null +++ b/examples/basic/static-components/src/components/Navbar/Navbar.tsx @@ -0,0 +1,14 @@ +import styles from './Navbar.module.css'; +import logo from '../../logo.svg'; +import { SocialList } from '../SocialList'; + +export default function () { + return ( + <div class={styles.nav}> + <div> + <img src={logo} alt="logo" class={styles.logo} /> + <SocialList /> + </div> + </div> + ); +} diff --git a/examples/basic/static-components/src/components/Navbar/index.tsx b/examples/basic/static-components/src/components/Navbar/index.tsx new file mode 100644 index 0000000..ee1d016 --- /dev/null +++ b/examples/basic/static-components/src/components/Navbar/index.tsx @@ -0,0 +1 @@ +export { default as Navbar } from './Navbar'; diff --git a/examples/basic/static-components/src/components/SocialList/SocialList.module.css b/examples/basic/static-components/src/components/SocialList/SocialList.module.css new file mode 100644 index 0000000..c64548b --- /dev/null +++ b/examples/basic/static-components/src/components/SocialList/SocialList.module.css @@ -0,0 +1,14 @@ +.socialList { + margin: 0; + padding: 0; + display: flex; +} + +.socialList > li { + margin-left: 0.5rem; +} + +.socialList i { + font-size: 2rem; + color: white; +} diff --git a/examples/basic/static-components/src/components/SocialList/SocialList.tsx b/examples/basic/static-components/src/components/SocialList/SocialList.tsx new file mode 100644 index 0000000..e710bab --- /dev/null +++ b/examples/basic/static-components/src/components/SocialList/SocialList.tsx @@ -0,0 +1,31 @@ +import styles from './SocialList.module.css'; +export default function SocialList() { + return ( + <ul role="list" class={styles.socialList}> + <li> + <a href="https://github.com/solidjs/solid"> + <span class="sr-only">Navigate to Github</span> + <i class="fa-brands fa-github-square"></i> + </a> + </li> + <li> + <a href="https://www.reddit.com/r/solidjs/"> + <span class="sr-only">Navigate to Reddit</span> + <i class="fa-brands fa-reddit-square"></i> + </a> + </li> + <li> + <a href="https://discord.com/invite/solidjs"> + <span class="sr-only">Navigate to Discord</span> + <i class="fa-brands fa-discord"></i> + </a> + </li> + <li> + <a href="https://twitter.com/solid_js"> + <span class="sr-only">Navigate to Twitter</span> + <i class="fa-brands fa-twitter-square"></i> + </a> + </li> + </ul> + ); +} diff --git a/examples/basic/static-components/src/components/SocialList/index.ts b/examples/basic/static-components/src/components/SocialList/index.ts new file mode 100644 index 0000000..27808c2 --- /dev/null +++ b/examples/basic/static-components/src/components/SocialList/index.ts @@ -0,0 +1 @@ +export { default as SocialList } from './SocialList'; diff --git a/examples/basic/static-components/src/components/Title/Title.module.css b/examples/basic/static-components/src/components/Title/Title.module.css new file mode 100644 index 0000000..e7919be --- /dev/null +++ b/examples/basic/static-components/src/components/Title/Title.module.css @@ -0,0 +1,11 @@ +.title { + margin: 0 auto; + line-height: 1.15; + font-size: 4rem; + margin-top: 3rem; + max-width: 700px; +} + +.title span { + color: var(--sLight-blue); +} diff --git a/examples/basic/static-components/src/components/Title/Title.tsx b/examples/basic/static-components/src/components/Title/Title.tsx new file mode 100644 index 0000000..044af54 --- /dev/null +++ b/examples/basic/static-components/src/components/Title/Title.tsx @@ -0,0 +1,8 @@ +import styles from './Title.module.css'; +export default function Title() { + return ( + <h1 class={styles.title}> + Simple and performant, <span>SolidJS!</span> + </h1> + ); +} diff --git a/examples/basic/static-components/src/components/Title/index.ts b/examples/basic/static-components/src/components/Title/index.ts new file mode 100644 index 0000000..7026b1a --- /dev/null +++ b/examples/basic/static-components/src/components/Title/index.ts @@ -0,0 +1 @@ +export { default as Title } from './Title'; diff --git a/examples/basic/static-components/src/index.css b/examples/basic/static-components/src/index.css new file mode 100644 index 0000000..f5be7a3 --- /dev/null +++ b/examples/basic/static-components/src/index.css @@ -0,0 +1,110 @@ +/* + {{ + CSS RESET + Source: https://piccalil.li/blog/a-modern-css-reset/ +*/ + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* A elements that don't have a class get default styles */ +a:not([class]) { + text-decoration-skip-ink: auto; +} + +/* Make images easier to work with */ +img, +picture { + max-width: 100%; + display: block; +} + +/* Inherit fonts for inputs and buttons */ +input, +button, +textarea, +select { + font: inherit; +} + +/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} +/* + end CSS reset + }} +*/ + +:root { + --sLight-blue: #446b9e; +} +body { + 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; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} diff --git a/examples/basic/static-components/src/index.tsx b/examples/basic/static-components/src/index.tsx new file mode 100644 index 0000000..6362c7b --- /dev/null +++ b/examples/basic/static-components/src/index.tsx @@ -0,0 +1,7 @@ +/* @refresh reload */ +import { render } from 'solid-js/web'; + +import './index.css'; +import App from './App'; + +render(() => <App />, document.getElementById('root') as HTMLElement); diff --git a/examples/basic/static-components/src/logo.svg b/examples/basic/static-components/src/logo.svg new file mode 100644 index 0000000..025aa30 --- /dev/null +++ b/examples/basic/static-components/src/logo.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg> \ No newline at end of file diff --git a/examples/basic/static-components/static-components-result.png b/examples/basic/static-components/static-components-result.png new file mode 100644 index 0000000..4037659 Binary files /dev/null and b/examples/basic/static-components/static-components-result.png differ diff --git a/examples/basic/static-components/tsconfig.json b/examples/basic/static-components/tsconfig.json new file mode 100644 index 0000000..249b273 --- /dev/null +++ b/examples/basic/static-components/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/examples/basic/static-components/vite.config.ts b/examples/basic/static-components/vite.config.ts new file mode 100644 index 0000000..d52d794 --- /dev/null +++ b/examples/basic/static-components/vite.config.ts @@ -0,0 +1,10 @@ +import { defineConfig } from 'vite'; +import solidPlugin from 'vite-plugin-solid'; + +export default defineConfig({ + plugins: [solidPlugin()], + build: { + target: 'esnext', + polyfillDynamicImport: false, + }, +}); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1ec1177..ade6107 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,6 +40,19 @@ importers: vite-plugin-inspect: 0.3.15_vite@2.9.12 vitest: 0.6.3_jsdom@19.0.0 + examples/basic/static-components: + specifiers: + solid-js: ^1.4.2 + typescript: ^4.6.4 + vite: ^2.9.9 + vite-plugin-solid: ^2.2.6 + dependencies: + solid-js: 1.4.4 + devDependencies: + typescript: 4.7.3 + vite: 2.9.12 + vite-plugin-solid: 2.2.6 + packages: /@ampproject/remapping/2.2.0: @@ -1692,7 +1705,7 @@ packages: dev: true /bytes/3.0.0: - resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=} + resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==} engines: {node: '>= 0.8'} dev: true @@ -1819,7 +1832,7 @@ packages: dev: true /concat-map/0.0.1: - resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true /connect/3.7.0: @@ -1981,7 +1994,7 @@ packages: dev: true /ee-first/1.1.1: - resolution: {integrity: sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=} + resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} dev: true /electron-to-chromium/1.4.153: @@ -2688,7 +2701,7 @@ packages: dev: true /ms/2.0.0: - resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=} + resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} dev: true /ms/2.1.2: @@ -3030,7 +3043,6 @@ packages: /solid-js/1.4.4: resolution: {integrity: sha512-nf/cbRzMuhb5UjbRDNfSJPqHKzUxNb9YgCQwijPUbdA3koQ/hWrz/lj0ter3lvThgxinvGPtXofDGy9bsKrXqA==} - dev: true /solid-meta/0.27.5_solid-js@1.4.4: resolution: {integrity: sha512-9OA50aNBhCwuFo1Uby9NT3gB6I6iBRN0mSXkXROJyWDtmyhdw9iyMT9JsnGF/A/7IQq2BSLV75oPQjNKQAMeQw==} @@ -3304,7 +3316,7 @@ packages: dev: true /utils-merge/1.0.1: - resolution: {integrity: sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=} + resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==} engines: {node: '>= 0.4.0'} dev: true