foo

bin/resources/glob/index.ts

@@ -12,14 +12,27 @@ type GlobOptions<T> = {
 const defaultCreate = (a: any) => a;
 
 const createGlob = <T = string>({ cwd, pattern, create = defaultCreate }: GlobOptions<T>) => {
+  const setup = (item: any) => {
+    if (item instanceof Observable) {
+      item.subscribe(() => {
+        glob.recreate();
+      });
+    }
+  };
   const glob = new Observable(async () => {
     const files = await fastGlob(pattern, { cwd });
-    return files.map((path) => create(resolve(cwd, path)));
+    return files.map((path) => {
+      const item = create(resolve(cwd, path));
+      setup(item);
+      return item;
+    });
   });
 
   const watcher = watchGlob(pattern, { cwd });
   watcher.on('add', (path) => {
-    glob.set((current) => Promise.resolve([...(current || []), create(resolve(cwd, path))]));
+    const item = create(resolve(cwd, path));
+    glob.set((current) => Promise.resolve([...(current || []), item]));
+    setup(item);
 
     return glob;
   });

bin/resources/page/client.ts

@@ -0,0 +1,9 @@
+import EventSource from 'eventsource';
+
+const path = encodeURIComponent(window.location.pathname);
+const source = new EventSource(`/dev?path=${path}`);
+source.onmessage = (msg) => {
+  if (msg.data === 'reload') {
+    window.location.reload();
+  }
+};

bin/resources/page/index.ts

@@ -5,6 +5,7 @@ import { Asset, Bundler } from '../../bundler';
 import { Observable } from '../../observable';
 import { ServerStyleSheet } from 'styled-components';
 import { resolve } from 'path';
+import { createScript } from '../script';
 
 type PageOptions = {
   path: string;
@@ -12,11 +13,28 @@ type PageOptions = {
   props: Observable<any>;
   bundler: Bundler;
 };
+
+let devClientUrl: string | undefined;
+
 const createPage = (options: PageOptions) => {
   const data = Observable.combine({
     template: options.template,
     props: options.props,
   });
+  if (devClientUrl === undefined) {
+    const devClient = createScript({
+      path: resolve(__dirname, 'client.ts'),
+      format: 'iife',
+    });
+    const devClientAsset = devClient.pipe<Asset>(async () => {
+      const script = await devClient.data;
+      return {
+        content: script,
+      };
+    });
+    const devClientBundle = options.bundler.register('/dev-client.js', devClientAsset);
+    devClientUrl = devClientBundle;
+  }
   const page = data.pipe(async ({ template, props }) => {
     const sheet = new ServerStyleSheet();
     const helmetContext: FilledContext = {} as any;
@@ -33,6 +51,7 @@ const createPage = (options: PageOptions) => {
     const css = sheet.getStyleTags();
     const headHtml = [
       css,
+      `<script src="${devClientUrl}"></script>`,
       helmet.title?.toString(),
       helmet.priority?.toString(),
       helmet.meta?.toString(),

bin/resources/page/main.md

@@ -0,0 +1,9 @@
+---
+company: Sydbank
+title: IT Hotline
+from: 2007
+to: 2009
+resume: false
+---
+
+I work as a part-time supporter of customers (private and business) and staff, on Sydbanks different electronic banking systems. Mostly telephonic bug finding and PC setup.