add resolveColors option + only compile once (#725)

* add resolveColors option + only compile once * add tests for ssr hmr
imba · Sep 16, 2022 · e33832d · e33832d
1 parent c7de108
commit e33832d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 7 deletions.
diff --git a/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts b/packages/e2e-tests/vite-ssr-esm/__tests__/vite-ssr-esm.spec.ts
@@ -68,7 +68,7 @@ test("css", async () => {
 // });
 
 if (!isBuild) {
-  describe.todo("hmr", () => {
+  describe("hmr", () => {
     const updateApp = editFileAndWaitForHmrComplete.bind(null, "src/main.imba");
     // test('should render additional html', async () => {
     // 	expect(await getEl('#hmr-test')).toBe(null);
@@ -83,12 +83,15 @@ if (!isBuild) {
     // TODO: support HMR for styles
     test("should apply style update", async () => {
       expect(await getColor(`button`)).toBe("green");
+	  const counter = await page.$("button")
+	  counter.click()
       await updateApp((content) => content.replace("c:green", "c:red"));
       await untilMatches(
         () => getColor("button"),
         "red",
         "button has color red",
       );
+	  expect(await page.textContent("button")).toMatch("Hello 2 times");
     });
     // test('should not preserve state of updated props', async () => {
     // 	expect(await getText(`#foo`)).toBe('foo');

diff --git a/packages/e2e-tests/vite-ssr-esm/src/main.imba b/packages/e2e-tests/vite-ssr-esm/src/main.imba
@@ -1,3 +1,4 @@
+global css body bgc:cool8
 export default tag App
 	count = 0
 	def mount

diff --git a/packages/imba/src/compiler/nodes.imba1 b/packages/imba/src/compiler/nodes.imba1
@@ -727,7 +727,7 @@ export class Stack
 		@options:imbaPath
 
 	def resolveColors
-		@options:styles !== 'extern'
+		@options:styles !== 'extern' or @options:resolveColors
 
 	def config
 		@options:config or {}

diff --git a/packages/vite-plugin-imba/src/utils/compile.ts b/packages/vite-plugin-imba/src/utils/compile.ts
@@ -24,6 +24,7 @@ const _createCompileImba = (makeHot?: Function) =>
 			filename,
 			generate: ssr ? 'ssr' : 'dom',
 			format: 'esm',
+			resolveColors: true,
 			sourcePath: filename,
 			sourcemap: options.compilerOptions.sourcemap ?? "inline"
 		};
@@ -70,12 +71,9 @@ const _createCompileImba = (makeHot?: Function) =>
 			  }
 			: compileOptions;
 		finalCompileOptions.config = finalCompileOptions
-		const compiled = compile(finalCode, finalCompileOptions);
 		finalCompileOptions.styles = "extern"
-		// compile the code twice, to get the CSS that includes the theme transformations and js that doesn't include 
-		// styles.register call which adds a style tag to the DOM.
-		const compiled_extern = compile(finalCode, finalCompileOptions);
-		compiled.js = {code: compiled_extern.js}
+		const compiled = compile(finalCode, finalCompileOptions);
+		compiled.js = {code: compiled.js}
 		compiled.css = {code: compiled.css}
 		if (emitCss && compiled.css.code) {
 			// TODO properly update sourcemap?