create-tinybase 0.2.5 → 0.3.1

package/templates/client/src/drawing/ColorPicker.tsx.hbs

@@ -1,17 +1,10 @@
 {{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
-import './colorPicker.css';
-import {useValue, useSetValueCallback, STORE_ID} from './SettingsStore';
+{{addImport "import './colorPicker.css';"}}
+{{addImport "import {useValueState, STORE_ID} from './SettingsStore';"}}
 
 export const ColorPicker = () => {
 const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
-const currentColor = useValue('brushColor', STORE_ID);
-
-const setColor = useSetValueCallback(
-'brushColor',
-(color: string) => color,
-[],
-STORE_ID,
-);
+const [currentColor, setColor] = useValueState('brushColor', STORE_ID);
 
 return (
 <div id="colorPicker">
@@ -21,4 +14,4 @@ return (
     ))}
 </div>
 );
-};
+};

package/templates/client/src/drawing/DrawingControls.tsx.hbs

@@ -1,18 +1,18 @@
 {{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
-import './drawingControls.css';
-import {useDelTableCallback, STORE_ID} from './CanvasStore';
+{{addImport "import './drawingControls.css';"}}
+{{addImport "import {useDelTableCallback, STORE_ID} from './CanvasStore';"}}
 
 {{includeFile template="client/src/shared/Button.tsx.hbs" output="client/src/Button.{{ext}}"}}
-import {Button} from './Button';
+{{addImport "import {Button} from './Button';"}}
 
 {{includeFile template="client/src/drawing/ColorPicker.tsx.hbs" output="client/src/ColorPicker.{{ext}}"}}
-import {ColorPicker} from './ColorPicker';
+{{addImport "import {ColorPicker} from './ColorPicker';"}}
 
 {{includeFile template="client/src/drawing/BrushSize.tsx.hbs" output="client/src/BrushSize.{{ext}}"}}
-import {BrushSize} from './BrushSize';
+{{addImport "import {BrushSize} from './BrushSize';"}}
 
 export const DrawingControls = () => {
-const clearStrokes = useDelTableCallback('strokes', () => null, [], STORE_ID);
+const clearStrokes = useDelTableCallback('strokes', STORE_ID);
 
 return (
 <div id="drawingControls">
@@ -21,4 +21,4 @@ return (
   <Button onClick={clearStrokes} variant="primary">Clear</Button>
 </div>
 );
-};
+};

package/templates/client/src/drawing/SettingsStore.tsx.hbs

@@ -1,10 +1,10 @@
 {{#if schemas}}
-  import {createStore} from 'tinybase/with-schemas';
-  import * as UiReact from 'tinybase/ui-react/with-schemas';
-  import {type NoTablesSchema} from 'tinybase/with-schemas';
+  {{addImport "import {createStore} from 'tinybase/with-schemas';"}}
+  {{addImport "import * as UiReact from 'tinybase/ui-react/with-schemas';"}}
+  {{addImport "import {type NoTablesSchema} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createStore} from 'tinybase';
-  import {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} from 'tinybase/ui-react';
+  {{addImport "import {createStore} from 'tinybase';"}}
+  {{addImport "import {useCreateStore, useProvideStore, useValueState, useValues} from 'tinybase/ui-react';"}}
 {{/if}}
 
 export const STORE_ID = 'settings';
@@ -17,12 +17,12 @@ export const STORE_ID = 'settings';
 
   type Schemas = [NoTablesSchema, typeof VALUES_SCHEMA];
 
-  const {useCreateStore, useProvideStore, useValue, useSetValueCallback, useValues} = UiReact as UiReact.WithSchemas<Schemas>;
+  const {useCreateStore, {{#if persist}}useCreatePersister, {{/if}}useProvideStore, useValues, useValueState} = UiReact as UiReact.WithSchemas<Schemas>;
 {{/if}}
 
-export {useValue, useSetValueCallback, useValues};
+export {useValueState, useValues};
 
-export const SettingsStore = () => {
+export const SettingsStore = ({onReady}: {onReady?: () => void}) => {
 const store = useCreateStore(() =>
 createStore(){{#if schemas}}
   .setValuesSchema(VALUES_SCHEMA){{/if}}
@@ -32,5 +32,78 @@ createStore(){{#if schemas}}
 
 useProvideStore(STORE_ID, store);
 
+{{#if persist}}
+  {{#if persistLocalStorage}}
+    {{#if schemas}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+
+    useCreatePersister(
+    store,
+    (store) => createLocalPersister(store, STORE_ID),
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistSqlite}}
+    {{#if schemas}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.{{ext}}"}}
+    {{addImport "import {getDb} from './sqlite';"}}
+    useCreatePersister(
+    store,
+    async (store) => {
+    const {sqlite3, db} = await getDb();
+    return createSqliteWasmPersister(store, sqlite3, db, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+  {{#if persistPglite}}
+    {{#if schemas}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{addImport "import {useCreatePersister} from 'tinybase/ui-react';"}}
+    {{/if}}
+    {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+    {{addImport "import {getPgLite} from './pglite';"}}
+
+    useCreatePersister(
+    store,
+    async (store) => {
+    const pgLite = await getPgLite();
+    return await createPglitePersister(store, pgLite, STORE_ID);
+    },
+    [],
+    async (persister) => {
+    await persister.load();
+    await persister.startAutoSave();
+    onReady?.();
+    },
+    );
+  {{/if}}
+{{/if}}
+
+{{#unless persist}}{{#unless sync}}
+    onReady?.();
+  {{/unless}}{{/unless}}
+
 return null;
 };

package/templates/client/src/drawing/app.ts.hbs

@@ -1,20 +1,30 @@
 {{includeFile template="client/src/drawing/settingsStore.ts.hbs" output="client/src/settingsStore.ts"}}
-import {settingsStore} from './settingsStore';
+{{addImport "import {settingsStore, settingsStoreReady} from './settingsStore';"}}
 
 {{includeFile template="client/src/drawing/canvasStore.ts.hbs" output="client/src/canvasStore.ts"}}
-import {canvasStore} from './canvasStore';
+{{addImport "import {canvasStore, canvasStoreReady} from './canvasStore';"}}
+
+{{includeFile template="client/src/shared/loading.ts.hbs" output="client/src/loading.{{ext}}"}}
+{{addImport "import {showLoading, hideLoading} from './loading';"}}
 
 {{includeFile template="client/src/drawing/drawingControls.ts.hbs" output="client/src/drawingControls.{{ext}}"}}
-import {createDrawingControls} from './drawingControls';
+{{addImport "import {createDrawingControls} from './drawingControls';"}}
 
 {{includeFile template="client/src/drawing/canvas.ts.hbs" output="client/src/canvas.{{ext}}"}}
-import {createCanvas} from './canvas';
+{{addImport "import {createCanvas} from './canvas';"}}
 
-const app = () => {
+export const app = async () => {
 const appContainer = document.getElementById('app')!;
 
+// Show loading spinner
+const loadingDiv = showLoading(appContainer);
+
+// Wait for stores to be ready
+await Promise.all([settingsStoreReady, canvasStoreReady]);
+
+// Remove loading spinner
+hideLoading(loadingDiv);
+
 appContainer.appendChild(createDrawingControls(settingsStore, canvasStore));
 appContainer.appendChild(createCanvas(settingsStore, canvasStore));
-};
-
-export {app};
+};

package/templates/client/src/drawing/brushSize.ts.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/drawing/brushSize.css.hbs" output="client/src/brushSize.css"}}
-import './brushSize.css';
-import type {Store as SettingsStore} from './settingsStore';
+{{addImport "import './brushSize.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
 
 export const createBrushSize = (store: SettingsStore): HTMLDivElement => {
 const container = document.createElement('div');
@@ -13,11 +13,15 @@ const sizeSlider = document.createElement('input');
 sizeSlider.type = 'range';
 sizeSlider.min = '1';
 sizeSlider.max = '50';
-sizeSlider.value = '5';
 
 const sizeLabel = document.createElement('span');
 sizeLabel.id = 'brushSizeValue';
-sizeLabel.textContent = '5';
+
+const updateSize = () => {
+const size = store.getValue('brushSize') ?? 5;
+sizeSlider.value = `${size}`;
+sizeLabel.textContent = `${size}`;
+};
 
 sizeSlider.addEventListener('input', () => {
 const size = parseInt(sizeSlider.value);
@@ -25,9 +29,12 @@ store.setValue('brushSize', size);
 sizeLabel.textContent = `${size}`;
 });
 
+store.addValueListener('brushSize', updateSize);
+updateSize();
+
 container.appendChild(label);
 container.appendChild(sizeSlider);
 container.appendChild(sizeLabel);
 
 return container;
-};
+};

package/templates/client/src/drawing/canvas.ts.hbs

@@ -1,8 +1,10 @@
 {{includeFile template="client/src/drawing/canvas.css.hbs" output="client/src/canvas.css"}}
-import './canvas.css';
-import {getUniqueId} from 'tinybase';
-import type {Store as SettingsStore} from './settingsStore';
-import type {Store as CanvasStore} from './canvasStore';
+{{addImport "import './canvas.css';"}}
+{{addImport "import {getHlcFunctions} from 'tinybase';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
+{{addImport "import type {CanvasStore, StrokeRow} from './canvasStore';"}}
+
+const [getNextHlc] = getHlcFunctions();
 
 export const createCanvas = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLCanvasElement => {
 const canvas = document.createElement('canvas');
@@ -13,91 +15,87 @@ canvas.height = 400;
 const ctx = canvas.getContext('2d')!;
 let isDrawing = false;
 let currentStrokeId: string | null = null;
-let pointIndex = 0;
 
 const draw = () => {
 ctx.fillStyle = '#111';
 ctx.fillRect(0, 0, canvas!.width, canvas!.height);
 
-const strokes = canvasStore.getTable('strokes');
-Object.entries(strokes).forEach(([id, stroke]: [string, any]) => {
-const points: Array<{x: number; y: number}> = [];
-  let i = 0;
-  while (stroke[`x${i}`] !== undefined && stroke[`y${i}`] !== undefined) {
-  points.push({x: stroke[`x${i}`], y: stroke[`y${i}`]});
-  i++;
+const sortedIds = canvasStore.getSortedRowIds('strokes');
+sortedIds.forEach((id) => {
+const stroke = canvasStore.getRow('strokes', id) as StrokeRow;
+if (stroke.points) {
+const pointsArray = JSON.parse(stroke.points) as number[];
+if (pointsArray.length >= 2) {
+ctx.strokeStyle = stroke.color;
+ctx.lineWidth = stroke.size * 2;
+ctx.lineCap = 'round';
+ctx.lineJoin = 'round';
+ctx.beginPath();
+ctx.moveTo(pointsArray[0], pointsArray[1]);
+for (let i = 2; i < pointsArray.length; i +=2) { ctx.lineTo(pointsArray[i], pointsArray[i + 1]); } ctx.stroke(); } } }); }; const addPoint=(e: MouseEvent | TouchEvent)=> {
+  if (!currentStrokeId) return;
+
+  const rect = canvas!.getBoundingClientRect();
+  const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+  const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+
+  const pointsArray = JSON.parse(canvasStore.getCell('strokes', currentStrokeId, 'points') as string ?? '[]') as number[];
+  pointsArray.push(clientX - rect.left, clientY - rect.top);
+  canvasStore.setCell('strokes', currentStrokeId, 'points', JSON.stringify(pointsArray));
+  };
+
+  const startStroke = (e: MouseEvent | TouchEvent) => {
+  const {brushColor, brushSize} = settingsStore.getValues();
+  currentStrokeId = getNextHlc();
+
+  canvasStore.setRow('strokes', currentStrokeId, {
+  color: brushColor,
+  size: brushSize,
+  points: '[]',
+  });
+
+  addPoint(e);
+  };
+
+  canvas.addEventListener('mousedown', (e) => {
+  isDrawing = true;
+  startStroke(e);
+  });
+
+  canvas.addEventListener('mouseup', () => {
+  isDrawing = false;
+  currentStrokeId = null;
+  });
+
+  canvas.addEventListener('mouseleave', () => {
+  isDrawing = false;
+  currentStrokeId = null;
+  });
+
+  canvas.addEventListener('mousemove', (e) => {
+  if (isDrawing) addPoint(e);
+  });
+
+  canvas.addEventListener('touchstart', (e) => {
+  isDrawing = true;
+  startStroke(e);
+  e.preventDefault();
+  });
+
+  canvas.addEventListener('touchmove', (e) => {
+  if (isDrawing) {
+  addPoint(e);
+  e.preventDefault();
   }
-  if (points.length > 0) {
-  ctx.strokeStyle = stroke.color;
-  ctx.lineWidth = stroke.size * 2;
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  ctx.beginPath();
-  ctx.moveTo(points[0].x, points[0].y);
-  for (let i = 1; i < points.length; i++) { ctx.lineTo(points[i].x, points[i].y); } ctx.stroke(); } }); }; const addPoint=(e: MouseEvent | TouchEvent)=> {
-    if (!currentStrokeId) return;
-
-    const rect = canvas!.getBoundingClientRect();
-    const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
-    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
-
-    canvasStore.setCell('strokes', currentStrokeId, `x${pointIndex}`, clientX - rect.left);
-    canvasStore.setCell('strokes', currentStrokeId, `y${pointIndex}`, clientY - rect.top);
-    pointIndex++;
-    };
-
-    const startStroke = (e: MouseEvent | TouchEvent) => {
-    const brush = settingsStore.getValues() as any;
-    currentStrokeId = getUniqueId();
-    pointIndex = 0;
-
-    canvasStore.setRow('strokes', currentStrokeId, {
-    color: brush.brushColor,
-    size: brush.brushSize,
-    });
-
-    addPoint(e);
-    };
-
-    canvas.addEventListener('mousedown', (e) => {
-    isDrawing = true;
-    startStroke(e);
-    });
-
-    canvas.addEventListener('mouseup', () => {
-    isDrawing = false;
-    currentStrokeId = null;
-    });
-
-    canvas.addEventListener('mouseleave', () => {
-    isDrawing = false;
-    currentStrokeId = null;
-    });
-
-    canvas.addEventListener('mousemove', (e) => {
-    if (isDrawing) addPoint(e);
-    });
-
-    canvas.addEventListener('touchstart', (e) => {
-    isDrawing = true;
-    startStroke(e);
-    e.preventDefault();
-    });
-
-    canvas.addEventListener('touchmove', (e) => {
-    if (isDrawing) {
-    addPoint(e);
-    e.preventDefault();
-    }
-    });
-
-    canvas.addEventListener('touchend', () => {
-    isDrawing = false;
-    currentStrokeId = null;
-    });
-
-    canvasStore.addTablesListener(draw);
-    draw();
-
-    return canvas;
-    };
+  });
+
+  canvas.addEventListener('touchend', () => {
+  isDrawing = false;
+  currentStrokeId = null;
+  });
+
+  canvasStore.addTablesListener(draw);
+  draw();
+
+  return canvas;
+  };

package/templates/client/src/drawing/canvasStore.ts.hbs

@@ -1,42 +1,109 @@
 {{#if schemas}}
-  import {createMergeableStore} from 'tinybase/with-schemas';
+  {{addImport "import {createMergeableStore, type Row} from 'tinybase/with-schemas';"}}
 {{else}}
-  import {createMergeableStore} from 'tinybase';
+  {{addImport "import {createMergeableStore} from 'tinybase';"}}
 {{/if}}
-import {getUniqueId} from 'tinybase';
-
-const STORE_ID = 'canvas';
 
 {{#if schemas}}
   const TABLES_SCHEMA = {
   strokes: {
-  color: {type: 'string'},
-  size: {type: 'number'},
+  color: {type: 'string', default: ''},
+  size: {type: 'number', default: 1},
+  points: {type: 'string', default: '[]'},
   },
   } as const;
 
 {{/if}}
-export const canvasStore = createMergeableStore(STORE_ID){{#if schemas}}
+export const canvasStore = createMergeableStore(){{#if schemas}}
   .setTablesSchema(TABLES_SCHEMA){{/if}}
 .setDefaultContent([{strokes: {}}, {}]);
 
-{{#if sync}}
-  {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
-  {{addImport "import {SERVER} from './config';"}}
-  {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
-  {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
-
-  const serverPathId = location.pathname;
-  createWsSynchronizer(
-  canvasStore,
-  new ReconnectingWebSocket(SERVER + serverPathId),
-  ).then(async (synchronizer) => {
-  await synchronizer.startSync();
-
-  synchronizer.getWebSocket().addEventListener('open', () => {
-  synchronizer.load().then(() => synchronizer.save());
-  });
+export type StrokeRow = {{#if schemas}}Row<typeof TABLES_SCHEMA, 'strokes'>{{else}}{color: string; size: number; points: string}{{/if}};
+
+let resolveCanvasReady: () => void;
+export const canvasStoreReady = new Promise<void>((resolve) => {
+  resolveCanvasReady = resolve;
   });
-{{/if}}
 
-export type CanvasStore = typeof canvasStore;
+  {{#if persist}}
+    {{#if persistLocalStorage}}
+      {{#if schemas}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createLocalPersister} from 'tinybase/persisters/persister-browser';"}}
+      {{/if}}
+
+      const canvasPersister = createLocalPersister(canvasStore, 'canvas');
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+    {{/if}}
+    {{#if persistSqlite}}
+      {{#if schemas}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createSqliteWasmPersister} from 'tinybase/persisters/persister-sqlite-wasm';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/sqlite.ts.hbs" output="client/src/sqlite.ts"}}
+      {{addImport "import {getDb} from './sqlite';"}}
+
+      getDb().then(({sqlite3, db}) => {
+      const canvasPersister = createSqliteWasmPersister(canvasStore, sqlite3, db, 'canvas');
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+      });
+    {{/if}}
+    {{#if persistPglite}}
+      {{#if schemas}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite/with-schemas';"}}
+      {{else}}
+        {{addImport "import {createPglitePersister} from 'tinybase/persisters/persister-pglite';"}}
+      {{/if}}
+      {{includeFile template="client/src/shared/pglite.ts.hbs" output="client/src/pglite.{{ext}}"}}
+      {{addImport "import {getPgLite} from './pglite';"}}
+
+      getPgLite().then((pgLite) => {
+      createPglitePersister(canvasStore, pgLite, 'canvas').then((canvasPersister) => {
+      canvasPersister.load().then(() => {
+      canvasPersister.startAutoSave();
+      resolveCanvasReady();
+      });
+      });
+      });
+    {{/if}}
+  {{/if}}
+
+  {{#if sync}}
+    {{includeFile template="client/src/shared/config.ts.hbs" output="client/src/config.ts"}}
+    {{addImport "import {SERVER} from './config';"}}
+    {{addImport "import ReconnectingWebSocket from 'reconnecting-websocket';"}}
+    {{#if schemas}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client/with-schemas';"}}
+    {{else}}
+      {{addImport "import {createWsSynchronizer} from 'tinybase/synchronizers/synchronizer-ws-client';"}}
+    {{/if}}
+
+    const serverPathId = location.pathname;
+    createWsSynchronizer(
+    canvasStore,
+    new ReconnectingWebSocket(SERVER + serverPathId),
+    ).then(async (synchronizer) => {
+    await synchronizer.startSync();
+
+    synchronizer.getWebSocket().addEventListener('open', () => {
+    synchronizer.load().then(() => {
+    synchronizer.save();
+    {{#unless persist}}resolveCanvasReady();{{/unless}}
+    });
+    });
+    });
+  {{/if}}
+
+  {{#unless persist}}{{#unless sync}}
+      resolveCanvasReady();
+    {{/unless}}{{/unless}}
+
+  export type CanvasStore = typeof canvasStore;

package/templates/client/src/drawing/colorPicker.ts.hbs

@@ -1,6 +1,6 @@
 {{includeFile template="client/src/drawing/colorPicker.css.hbs" output="client/src/colorPicker.css"}}
-import './colorPicker.css';
-import type {Store as SettingsStore} from './settingsStore';
+{{addImport "import './colorPicker.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
 
 export const createColorPicker = (store: SettingsStore): HTMLDivElement => {
 const colors = ['#d81b60', '#1976d2', '#388e3c', '#f57c00', '#7b1fa2', '#fff'];
@@ -31,4 +31,4 @@ store.addValueListener('brushColor', updateActive);
 updateActive();
 
 return container;
-};
+};

package/templates/client/src/drawing/drawingControls.ts.hbs

@@ -1,16 +1,16 @@
 {{includeFile template="client/src/drawing/drawingControls.css.hbs" output="client/src/drawingControls.css"}}
-import './drawingControls.css';
-import type {Store as SettingsStore} from './settingsStore';
-import type {Store as CanvasStore} from './canvasStore';
+{{addImport "import './drawingControls.css';"}}
+{{addImport "import type {SettingsStore} from './settingsStore';"}}
+{{addImport "import type {CanvasStore} from './canvasStore';"}}
 
 {{includeFile template="client/src/shared/button.ts.hbs" output="client/src/button.{{ext}}"}}
-import {createButton} from './button';
+{{addImport "import {createButton} from './button';"}}
 
 {{includeFile template="client/src/drawing/colorPicker.ts.hbs" output="client/src/colorPicker.{{ext}}"}}
-import {createColorPicker} from './colorPicker';
+{{addImport "import {createColorPicker} from './colorPicker';"}}
 
 {{includeFile template="client/src/drawing/brushSize.ts.hbs" output="client/src/brushSize.{{ext}}"}}
-import {createBrushSize} from './brushSize';
+{{addImport "import {createBrushSize} from './brushSize';"}}
 
 export const createDrawingControls = (settingsStore: SettingsStore, canvasStore: CanvasStore): HTMLDivElement => {
 const controls = document.createElement('div');
@@ -23,4 +23,4 @@ const clearButton = createButton('Clear', () => canvasStore.delTable('strokes'),
 controls.appendChild(clearButton);
 
 return controls;
-};
+};