configure

website/index.html

@@ -31,9 +31,18 @@
 
     <joist-header></joist-header>
 
-    <joist-nav></joist-nav>
+    <joist-main>
+      <joist-nav slot="nav"></joist-nav>
 
-    <script type="module" src="./elements/joist-header/joist-header.ts"></script>
-    <script type="module" src="./elements/joist-nav/joist-nav.ts"></script>
+      <main>
+        <h1>Hello World</h1>
+
+        <p>Welcome to Joist</p>
+      </main>
+    </joist-main>
+
+    <script type="module" src="/src/elements/joist-header/joist-header.ts"></script>
+    <script type="module" src="/src/elements/joist-nav/joist-nav.ts"></script>
+    <script type="module" src="/src/elements/joist-main/joist-main.ts"></script>
   </body>
 </html>

website/package.json

@@ -7,6 +7,6 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.4.7"
+    "vite": "6.0.0-beta.2"
   }
 }

website/elements/joist-header/joist-header.ts → website/src/elements/joist-header/joist-header.ts

@@ -3,10 +3,6 @@ import { element } from '@joist/element';
 @element({
   tagName: 'joist-header'
 })
-class JoistHeaderElement extends HTMLElement {
-  constructor() {
-    super();
-  }
-}
+class JoistHeaderElement extends HTMLElement {}
 
 export { JoistHeaderElement };

website/src/elements/joist-main/joist-main.css

@@ -0,0 +1,11 @@
+:host {
+  display: flex;
+}
+
+#nav {
+  display: block;
+}
+
+#main {
+  display: block;
+}

website/src/elements/joist-main/joist-main.html

@@ -0,0 +1,3 @@
+<slot id="nav" name="nav"></slot>
+
+<slot id="main"></slot>

website/src/elements/joist-main/joist-main.ts

@@ -0,0 +1,8 @@
+import { element } from '@joist/element';
+
+@element({
+  tagName: 'joist-main'
+})
+class JoistMainElement extends HTMLElement {}
+
+export { JoistMainElement };

website/elements/joist-nav/joist-nav.css → website/src/elements/joist-nav/joist-nav.css

@@ -5,4 +5,5 @@
 nav {
   display: flex;
   flex-direction: column;
+  padding: 1rem;
 }

website/elements/joist-nav/joist-nav.ts → website/src/elements/joist-nav/joist-nav.ts

@@ -3,6 +3,10 @@ import { element } from '@joist/element';
 @element({
   tagName: 'joist-nav'
 })
-class JoistNavElement extends HTMLElement {}
+class JoistNavElement extends HTMLElement {
+  connectedCallback(): void {
+    alert('test');
+  }
+}
 
 export { JoistNavElement };

website/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

website/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

website/vite.config.js

@@ -4,19 +4,22 @@ import { defineConfig } from 'vite';
 const applicator = new Applicator(
   new NoopTemplateCache(),
   new FileSysTemplateLoader(
-    (tag) => `elements/${tag}/${tag}.html`,
-    (tag) => `elements/${tag}/${tag}.css`
+    (tag) => `./src/elements/${tag}/${tag}.html`,
+    (tag) => `./src/elements/${tag}/${tag}.css`
   )
 );
 
 export default defineConfig({
+  esbuild: {
+    target: 'es2020'
+  },
   plugins: [
     {
       name: 'Web Component SSR',
       transformIndexHtml: {
         order: 'pre',
         handler(html) {
-          return applicator.apply(html, ['joist-header', 'joist-nav']);
+          return applicator.apply(html, ['joist-header', 'joist-nav', 'joist-main']);
         }
       },
       handleHotUpdate({ file, server }) {