Merge pull request #100 from bcomnes/tonic-example

Add tonic example

.github/dependabot.yml

@@ -26,6 +26,10 @@ updates:
     directory: "/examples/string-layouts/"
     schedule:
       interval: "daily"
+  - package-ecosystem: "npm"
+    directory: "/examples/tonic-components/"
+    schedule:
+      interval: "daily"
   # Enable updates to github actions
   - package-ecosystem: "github-actions"
     directory: "/"

examples/basic/package.json

@@ -4,15 +4,22 @@
   "description": "",
   "type": "module",
   "scripts": {
-    "build": "siteup --src src --dest public"
+    "start": "npm run watch",
+    "build": "npm run clean && siteup",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && run-p watch:*",
+    "watch:serve": "browser-sync start --server 'public' --files 'public'",
+    "watch:siteup": "npm run build -- --watch"
   },
   "keywords": [],
   "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
   "license": "MIT",
   "devDependencies": {
-    "@siteup/cli": "../../."
+    "browser-sync": "^2.26.7",
+    "npm-run-all2": "^6.0.0"
   },
   "dependencies": {
+    "@siteup/cli": "../../.",
     "uhtml-isomorphic": "^2.1.0",
     "mine.css": "^9.0.1"
   }

examples/default-layout/package.json

@@ -4,11 +4,20 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "siteup"
+    "start": "npm run watch",
+    "build": "npm run clean && siteup",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && run-p watch:*",
+    "watch:serve": "browser-sync start --server 'public' --files 'public'",
+    "watch:siteup": "npm run build -- --watch"
   },
-  "devDependencies": {
+  "dependencies": {
     "@siteup/cli": "../../."
   },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "npm-run-all2": "^6.0.0"
+  },
   "keywords": [],
   "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
   "license": "MIT"

examples/nested-dest/package.json

@@ -4,14 +4,23 @@
   "description": "",
   "type": "module",
   "scripts": {
-    "build": "siteup --src . --dest public --ignore ignore"
+    "start": "npm run watch",
+    "build": "npm run clean && siteup",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && run-p watch:*",
+    "watch:serve": "browser-sync start --server 'public' --files 'public'",
+    "watch:siteup": "npm run build -- --watch"
   },
   "keywords": [],
   "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "@siteup/cli": "../../.",
     "mine.css": "^9.0.1",
     "uhtml-isomorphic": "^2.1.0"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "npm-run-all2": "^6.0.0"
   }
 }

examples/string-layouts/package.json

@@ -3,11 +3,20 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "build": "siteup"
+    "start": "npm run watch",
+    "build": "npm run clean && siteup",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && run-p watch:*",
+    "watch:serve": "browser-sync start --server 'public' --files 'public'",
+    "watch:siteup": "npm run build -- --watch"
   },
   "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
   "license": "MIT",
-  "devDependencies": {
+  "dependencies": {
     "@siteup/cli": "../../."
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "npm-run-all2": "^6.0.0"
   }
 }

examples/tonic-components/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "string-layouts",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "npm run watch",
+    "build": "npm run clean && siteup",
+    "clean": "rm -rf public && mkdir -p public",
+    "watch": "npm run clean && run-p watch:*",
+    "watch:serve": "browser-sync start --server 'public' --files 'public'",
+    "watch:siteup": "npm run build -- --watch"
+  },
+  "author": "Bret Comnes <bcomnes@gmail.com> (https://bret.io/)",
+  "license": "MIT",
+  "dependencies": {
+    "@siteup/cli": "../../.",
+    "@socketsupply/tonic": "^15.1.1",
+    "mine.css": "^9.0.1",
+    "tonic-ssr": "github:socketsupply/tonic-ssr#f447a8ae2bec27a526ae489fa8510a1c646f4a66"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.7",
+    "npm-run-all2": "^6.0.0"
+  }
+}

examples/tonic-components/src/client.js

@@ -0,0 +1,4 @@
+import Tonic from '@socketsupply/tonic'
+import { ChildComponent } from './components/child-component.js'
+
+Tonic.add(ChildComponent)

examples/tonic-components/src/components/child-component.js

@@ -0,0 +1,11 @@
+import Tonic from '@socketsupply/tonic'
+
+export class ChildComponent extends Tonic {
+  render () {
+    return this.html`
+      <div class="child">
+        ${this.props.value}
+      </div>
+    `
+  }
+}

examples/tonic-components/src/components/hello-world.js

@@ -0,0 +1,36 @@
+import Tonic from '@socketsupply/tonic'
+
+const sleep = t => new Promise(resolve => setTimeout(resolve, t))
+
+export class HelloWorld extends Tonic {
+  stylesheet () {
+    return `
+      hello-world {
+        border: ${this.props.border};
+      }
+    `
+  }
+
+  async click () {
+    //
+    // Won't do anything on the server,
+    // will work if rendered in the browser.
+    //
+  }
+
+  async render () {
+    await sleep(200)
+
+    const {
+      greetings,
+      lang
+    } = this.props
+
+    return this.html`
+      <h1>
+        ${greetings[lang]}
+        <time-stamp></time-stamp>
+      </h1>
+    `
+  }
+}

examples/tonic-components/src/components/layout-parent.js

@@ -0,0 +1,11 @@
+import Tonic from '@socketsupply/tonic'
+
+export class ParentComponent extends Tonic {
+  render () {
+    return this.html`
+      <div class="parent">
+          ${this.children}
+      </div>
+    `
+  }
+}

examples/tonic-components/src/components/time-stamp.js

@@ -0,0 +1,11 @@
+import Tonic from '@socketsupply/tonic'
+
+export class TimeStamp extends Tonic {
+  render () {
+    return this.html`
+      <time>
+        Tue Jan 26 22:18:05 CET 2021
+      </time>
+    `
+  }
+}

examples/tonic-components/src/components/wrapper-parent.js

@@ -0,0 +1,11 @@
+import { Tonic } from '@socketsupply/tonic'
+
+export class WrapperParent extends Tonic {
+  render () {
+    return this.html`
+      <div class="wrapper">
+          ${this.children}
+      </div>
+    `
+  }
+}

examples/tonic-components/src/global.client.js

@@ -0,0 +1,4 @@
+import Tonic from '@socketsupply/tonic'
+import { ParentComponent } from './components/layout-parent.js'
+
+Tonic.add(ParentComponent)

examples/tonic-components/src/global.css

@@ -0,0 +1,3 @@
+@import 'mine.css/dist/mine.css';
+@import 'mine.css/dist/layout.css';
+

examples/tonic-components/src/global.vars.js

@@ -0,0 +1,5 @@
+export default async function () {
+  return {
+    siteName: 'Example site with tonic'
+  }
+}

examples/tonic-components/src/md-page/README.md

@@ -0,0 +1,11 @@
+---
+title: Tonic Components!
+---
+# String layout example
+
+That includes a tonic component
+
+<wrapper-parent>
+  <div>Hello!</div>
+  <div>World</div>
+</wrapper-parent>

examples/tonic-components/src/md-page/client.js

@@ -0,0 +1,4 @@
+import { Tonic } from '@socketsupply/tonic'
+import { WrapperParent } from '../components/wrapper-parent.js'
+
+Tonic.add(WrapperParent)

examples/tonic-components/src/page.html

@@ -0,0 +1,6 @@
+<child-component value="hello world"></child-component>
+
+<div>This is just some static html here</div>
+
+<div><a href="./md-page/">markdown page</a></div>
+<div><a href="./ssr-page/">ssr page</a></div>

examples/tonic-components/src/root.layout.js

@@ -0,0 +1,32 @@
+// Layouts can be a simple as returning a template literal, though you can use
+// libraries like uhtml-isomorphic for better DX.
+
+export default async function RootLayout ({
+  title,
+  siteName,
+  scripts,
+  styles,
+  children
+}) {
+  return /* html */`
+    <!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8">
+      <title>${siteName || ''}${title ? ` | ${title}` : ''}</title>
+      <meta name="viewport" content="width=device-width, user-scalable=no" />
+      ${scripts
+        ? scripts.map(script => /* html */`<script src="${script}" type='module'></script>`).join('\n')
+        : ''}
+      ${styles
+        ? styles.map(style => /* html */`<link rel="stylesheet" href=${style} />`).join('\n')
+        : ''}
+    </head>
+    <body>
+      <parent-component>
+        ${children}
+      </parent-component>
+    </body>
+    </html>
+`
+}

examples/tonic-components/src/ssr-page/client.js

@@ -0,0 +1,37 @@
+import { Tonic } from '@socketsupply/tonic'
+import { TimeStamp } from '../components/time-stamp.js'
+import { HelloWorld } from '../components/hello-world.js'
+
+export class MainComponent extends Tonic {
+  constructor (props) {
+    super()
+    this.props = props
+  }
+
+  render () {
+    const greetings = { en: 'Hello' }
+
+    return this.html`
+      <header>
+        ${String(this.props.timestamp)}
+      </header>
+
+      <main>
+        <hello-world
+          id="hello"
+          lang="en"
+          border="1px solid red"
+          greetings="${greetings}"
+        >
+        </hello-world>
+      </main>
+
+      <footer>
+      </footer>
+    `
+  }
+}
+
+Tonic.add(TimeStamp)
+Tonic.add(HelloWorld)
+Tonic.add(MainComponent)

examples/tonic-components/src/ssr-page/page.js

@@ -0,0 +1,8 @@
+import 'tonic-ssr'
+import { MainComponent } from './client.js'
+
+export default () => {
+  return (new MainComponent({
+    timestamp: 1611695921286
+  })).preRender()
+}

package.json

@@ -77,10 +77,11 @@
     "test:deptree": "depcruise --validate .dependency-cruiser.json bin.js",
     "build-examples": "run-p example:*",
     "example:basic": "cd examples/basic && npm i && npm run build",
-    "example:string-layouts": "cd examples/string-layouts && npm i && npm run build",
-    "example:default-layout": "cd examples/default-layout && npm i && npm run build",
-    "example:nested-dest": "cd examples/nested-dest && npm i && npm run build",
-    "example-skip:uhtml-isomorphic": "cd examples/nested-dest && npm i && npm run build",
+    "example:string-layouts": "cd examples/string-layouts && npm i --production && npm run build",
+    "example:default-layout": "cd examples/default-layout && npm i --production && npm run build",
+    "example:nested-dest": "cd examples/nested-dest && npm i --production && npm run build",
+    "example:tonic-components-dest": "cd examples/tonic-components && npm i --production && npm run build",
+    "example-skip:uhtml-isomorphic": "cd examples/nested-dest && npm i --production && npm run build",
     "version": "run-s version:*",
     "version:changelog": "auto-changelog -p --template keepachangelog auto-changelog --breaking-pattern 'BREAKING CHANGE:'",
     "version:git": "git add CHANGELOG.md",