initial commit

trafnar · Sep 7, 2023 · 5176925 · 5176925
commit 5176925
Show file tree

Hide file tree

Showing 12 changed files with 2,333 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+dist/
+node_modules/
diff --git a/build.imba b/build.imba
@@ -0,0 +1,74 @@
+const fs = require("fs-extra")
+const childProcess = require("child_process")
+const exec = require("util").promisify(childProcess.exec)
+
+const pages = import.meta.glob("./pages/*.imba", {eager: true})
+
+# This function defines an html page layout, it accepts a function which
+# returns the page content (usually a single custom tag)
+export def layout pageContent, stylesheet, javascript
+	<html lang="en">
+		<head>
+			<title> "Cool App"
+			<style src=stylesheet>
+			<script type="module" src=javascript>
+		<body>
+			<pageContent()>
+
+
+# run imba build command on the page file (this is necessary to generate css from that file)
+# this is run on compound.imba, which is a page that includes all pages, so that the CSS includes everything needed
+def imbaBuildToGetStylesheet
+	console.log 'running imba build to get stylesheet'
+	# await exec "imba build --web --no-minify --no-sourcemap --esbuild --base './' {__dirname}/compound.imba"
+
+	# this vite build relies on specific directory structure, src/index.js and a root level index.html
+	# since this exists only to generate a css file, i'd like to stick that all somewhere but i'm not sure how to configure vite build
+	await exec "vite build --manifest"
+	return "./{__dirname}/dist/"
+
+# from the generated manifest in imbaBuildToGetStylesheet, use the manifest to get the path to the CSS file
+def getCssJsPathsFromManifest
+	console.log 'getting css and js paths from manifest'
+	# read the manifest to get the path to the CSS file
+	const data = fs.readFileSync "{__dirname}/dist/manifest.json"	
+	const manifest = JSON.parse(data)
+	const stylesheetPath = manifest["index.css"].file
+
+	# can we generate a unique js file for each page? and one for global?
+	const javascriptPath = manifest["index.html"].file
+	console.log { stylesheetPath, javascriptPath }
+	return { stylesheetPath, javascriptPath }
+
+# given a page tag, stick it in the layout, and add the stylesheet path
+def assemblePageInLayout page, stylesheetPath, javascriptPath
+	console.log 'assembling page in layout'
+	# use the CSS file to build the page content layout
+	return layout((do page), stylesheetPath, javascriptPath)
+
+# SSR a page tag and write it to a file
+def writeSSRPage page, filename
+	console.log 'writing ssr page'
+	# SSR the html template and index.html into the dist folder
+	const directory = "{__dirname}/dist"
+	const fullPath = "{directory}/{filename}"
+	if await fs.pathExists(directory)
+		fs.writeFile fullPath, String(page)
+		return fullPath
+
+# given pages in the form {filename: "index.html", tagInstance: <HomePage>}, build them and write them
+def buildPages pages = []
+	await imbaBuildToGetStylesheet()
+	const { stylesheetPath, javascriptPath } = getCssJsPathsFromManifest()
+	for page in pages
+		console.log "Building page: {page.filename}"
+		const pageInLayout = assemblePageInLayout(page.tagInstance, stylesheetPath, javascriptPath)
+		writeSSRPage(pageInLayout, page.filename)
+
+
+const pageList = Object.keys(pages).map do(key)
+	const filename = key.replace("./pages/", "").replace(".imba", ".html")
+	const tagInstance = pages[key].default
+	return {filename, tagInstance}
+
+buildPages(pageList)
diff --git a/components/nav.imba b/components/nav.imba
@@ -0,0 +1,4 @@
+export default tag Nav
+	<self[d:flex g:10px]>
+		<a href="/"> "Home"
+		<a href="/about.html"> "About"
diff --git a/compound.imba b/compound.imba
@@ -0,0 +1,11 @@
+# this exists purely so that the build script has something with all pages included in it
+# so that it can generate one CSS file that covers all pages...
+
+const pages = import.meta.glob("./pages/*.imba", {eager: true})
+
+const pageList = pages..map do(page) return page.default
+
+export default tag CompoundPage
+	<self>
+		for page in pagesList
+			<{page}>
diff --git a/imba.config.mjs b/imba.config.mjs
@@ -0,0 +1,10 @@
+import { defineConfig } from "imba";
+
+export default defineConfig({
+  bundler: "vite",
+  client: {
+    resolve: {
+      conditions: ["imba"],
+    },
+  },
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Imba Vite Template</title>
+  </head>
+  <body>
+    <script type="module" src="/src/index.js"></script>
+  </body>
+</html>