chore: copy examples to folder

examples/aggregation/components/my-component.webc

@@ -0,0 +1,5 @@
+<style>
+my-component {
+	color: rebeccapurple;
+}
+</style>

examples/aggregation/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/my-component.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/aggregation/page.webc

@@ -0,0 +1 @@
+<my-component>Default slot</my-component>

examples/attributes/components/my-component.webc

@@ -0,0 +1,3 @@
+<template webc:root class="another-class">
+	Some component content
+</template>

examples/attributes/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/my-component.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/attributes/page.webc

@@ -0,0 +1 @@
+<my-component class="sr-only">This is the default slot</my-component>

examples/custom-transforms/package.json

@@ -0,0 +1,6 @@
+{
+	"type": "module",
+  "dependencies": {
+    "markdown-it": "^13.0.1"
+  }
+}

examples/custom-transforms/page.js

@@ -0,0 +1,15 @@
+import MarkdownIt from "markdown-it";
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+
+let md = new MarkdownIt({ html: true });
+
+page.setTransform("md", (content) => {
+	return md.render(content);
+});
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/custom-transforms/page.webc

@@ -0,0 +1,31 @@
+<template webc:type="md">
+# Header
+## Header 2
+### Header 3
+
+* List item 1
+* List item 2
+* List item 3
+
+1. List item 1
+2. List item 2
+3. List item 3
+
+**Bold text**
+
+*Italic text*
+
+~~Strikethrough text~~
+
+[Link](https://11ty.dev)
+
+![Image](https://pbs.twimg.com/profile_images/1196791261233111040/iWVjazhO_400x400.jpg)
+
+
+| Column 1 | Column 2 | Column 3 |
+| -------- | -------- | -------- |
+| Row 1    | Row 1    | Row 1    |
+| Row 2    | Row 2    | Row 2    |
+
+</template>
+

examples/helpers/page.js

@@ -0,0 +1,11 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.setHelper("alwaysBlue", () => {
+	return "I'm blue, da ba dee da ba di"
+});
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/helpers/page.webc

@@ -0,0 +1,5 @@
+<script webc:type="render" webc:is="template">
+function() {
+	return this.alwaysBlue();
+}
+</script>

examples/html/page.js

@@ -0,0 +1,12 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+
+let { html, css, js, components } = await page.compile({
+	data: {
+		dataProperty: "dataValue",
+	},
+});
+console.log({ html, css, js, components });

examples/html/page.webc

@@ -0,0 +1,5 @@
+<template @html="'Template HTML'"></template>
+<template @html="this.dataProperty"></template>
+
+<!-- webc:nokeep will replace the outer html -->
+<template @html="'Template HTML'" webc:nokeep></template>

examples/imports/components/my-component.webc

@@ -0,0 +1 @@
+Components don’t need a root element, y’all.

examples/imports/components/my-dynamic-component.webc

@@ -0,0 +1 @@
+This other component is dynamically imported!!!

examples/imports/components/my-remapped-component.webc

@@ -0,0 +1 @@
+And this other component is a remapped component!

examples/imports/page.js

@@ -0,0 +1,19 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+
+// Pass in a glob, using the file name as component name
+page.defineComponents("components/**.webc");
+
+// Array of file names, using file name as component name
+// page.defineComponents(["components/my-component.webc"]);
+
+// Object maps component name to file name
+// page.defineComponents({
+// 	"my-component": "components/my-component.webc"
+// });
+
+let { html } = await page.compile();
+console.log({ html });

examples/imports/page.webc

@@ -0,0 +1,8 @@
+<title>WebC Example</title>
+<my-component></my-component>
+
+<!-- Dynamic import -->
+<any-tag-name webc:import="components/my-dynamic-component.webc"></any-tag-name>
+
+<!-- Remapping components -->
+<div webc:is="my-remapped-component"></div>

examples/lookup-attributes/components/my-component.webc

@@ -0,0 +1 @@
+<img :src="src" :alt="alt" class="avatar-image">

examples/lookup-attributes/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/my-component.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/lookup-attributes/page.webc

@@ -0,0 +1 @@
+<avatar-image src="my-image.jpeg" alt="Zach is an awesome person"></avatar-image>

examples/page/page.js

@@ -0,0 +1,8 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/page/page.webc

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>WebC Example</title>
+		<style webc:keep>
+			body {
+				color: #333;
+			}
+		</style>
+		<script webc:keep>
+			alert("Hello World!");
+		</script>
+		<script webc:nokeep>
+			console.log("Hello World!");
+		</script>
+	</head>
+	<body>
+		<style webc:nokeep>
+			body {
+				color: red;
+			}
+		</style>
+		WebC *is* HTML.
+	</body>
+</html>

examples/properties/components/my-component.webc

@@ -0,0 +1 @@
+<img :src="src" :alt="alt" class="avatar-image">

examples/properties/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/my-component.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/properties/page.webc

@@ -0,0 +1 @@
+<avatar-image src="my-image.jpeg" alt="Zach is an awesome person" @secret="This is just between us"></avatar-image>></avatar-image>

examples/raw/page.js

@@ -0,0 +1,8 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/raw/page.webc

@@ -0,0 +1,6 @@
+<template webc:raw>
+Leave me out of this.
+<style>
+p { color: rebeccapurple; }
+</style>
+</template>

examples/render/components/add-banner-to-css.webc

@@ -0,0 +1,6 @@
+<script webc:type="render" webc:is="style">
+function() {
+	return `/* ${this.license} */`;
+}
+</script>
+<slot></slot>

examples/render/components/img.webc

@@ -0,0 +1,9 @@
+<script webc:type="render" webc:is="template">
+function() {
+	if(!this.alt) {
+		throw new Error("oh no you didn’t");
+	}
+	// Free idea: use the Eleventy Image plugin to return optimized markup
+	return `<img src="${this.src}" alt="${this.alt}">`;
+}
+</script>

examples/render/page.js

@@ -0,0 +1,12 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents({
+	"avatar-image": "components/img.webc",
+	"add-banner-to-css": "components/add-banner-to-css.webc"
+});
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/render/page.webc

@@ -0,0 +1,5 @@
+<avatar-image src="my-image.jpeg" alt="Zach is an awesome person" @secret="This is just between us"></avatar-image>
+
+<add-banner-to-css license="MIT licensed">
+/* Some other CSS content */
+</add-banner-to-css>

examples/scoped-css/components/my-component-prefixed.webc

@@ -0,0 +1,8 @@
+<style webc:scoped="my-prefix">
+:host {
+	color: blue;
+}
+:host:defined {
+	color: rebeccapurple;
+}
+</style>

examples/scoped-css/components/my-component.webc

@@ -0,0 +1,8 @@
+<style webc:scoped>
+:host {
+	color: blue;
+}
+:host:defined {
+	color: rebeccapurple;
+}
+</style>

examples/scoped-css/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/**.webc");
+
+let { html, css, js, components } = await page.compile();
+console.log({ html, css, js, components });

examples/scoped-css/page.webc

@@ -0,0 +1,2 @@
+<my-component>Default slot</my-component>
+<my-component-prefixed>Prefixed slot</my-component-prefixed>

examples/slots/components/my-component.webc

@@ -0,0 +1,17 @@
+<p>Hello World!</p>
+
+<dialog><slot></slot></dialog>
+
+<div><slot name="my-slot"></slot></div>
+
+<main><slot webc:keep name="my-other-slot"></slot></main>
+
+<style>
+	p {
+		color: red;
+	}
+</style>
+
+<script>
+	alert("Hello World!");
+</script>

examples/slots/page.js

@@ -0,0 +1,9 @@
+import { WebC } from "../../webc.js";
+
+let page = new WebC();
+
+page.setInputPath("page.webc");
+page.defineComponents("components/my-component.webc");
+
+let { html } = await page.compile();
+console.log({ html });

examples/slots/page.webc

@@ -0,0 +1,17 @@
+<title>WebC Example</title>
+
+<!-- Keep that host component HTML -->
+<my-component webc:keep></my-component>
+
+<!-- Slots -->
+<my-component>This is the default slot</my-component>
+
+<!-- Named slots -->
+<my-component>
+	<div slot="my-slot">This is a named slot</div>
+</my-component>
+
+<!-- Named slots -->
+<my-component>
+	<div slot="my-other-slot">This is another named slot with slot tag</div>
+</my-component>