@astrojs/compiler 0.2.16-rc.1 → 0.2.16

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @astrojs/compiler
 
+## 0.2.16
+
+### Patch Changes
+
+- 9ad8da7: Allows a data-astro-raw attr to parse children as raw text
+- 61b77de: Bugfix: CSS and selector scoping
+
 ## 0.2.15
 
 ### Patch Changes

package/deno/README.md

@@ -0,0 +1,5 @@
+# astro_compiler
+
+Experimental WASM compiler for Astro.
+
+This barely works, so probably don't use this package!

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/compiler",
   "type": "module",
-  "version": "0.2.16-rc.1",
+  "version": "0.2.16",
   "scripts": {
     "build": "tsc -p ."
   },

package/test/basic.test.mjs

@@ -0,0 +1,73 @@
+/* eslint-disable no-console */
+
+import { transform } from '@astrojs/compiler';
+import sass from 'sass';
+
+function transformSass(value) {
+  return new Promise((resolve, reject) => {
+    sass.render({ data: value }, (err, result) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve({ code: result.css.toString('utf8'), map: result.map });
+      return;
+    });
+  });
+}
+
+async function run() {
+  const result = await transform(
+    `---
+let value = 'world';
+---
+
+<style lang="scss" define:vars={{ a: 0 }}>
+$color: red;
+
+div {
+  color: $color;
+}
+</style>
+
+<div>Hello world!</div>
+
+<div>Ahhh</div>
+
+<style lang="scss">
+$color: green;
+div {
+  color: $color;
+}
+</style>
+`,
+    {
+      sourcemap: true,
+      // HOLY CRAP THIS ACTUALLY WORKS!
+      preprocessStyle: async (value, attrs) => {
+        if (!attrs.lang) {
+          return null;
+        }
+        if (attrs.lang === 'scss') {
+          try {
+            return transformSass(value);
+          } catch (err) {
+            console.error(err);
+          }
+        }
+        return null;
+      },
+    }
+  );
+
+  // test
+  if (!result.code.includes('color:red')) {
+    throw new Error(`Styles didn’t transform as expected. Expected "color:red" to be present.`);
+  }
+
+  if (!result.code.includes('color:green')) {
+    throw new Error(`Styles didn’t transform as expected. Expected "color:green" to be present.`);
+  }
+}
+
+await run();

package/test/output.test.mjs

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+import { transform } from '@astrojs/compiler';
+
+async function run() {
+  const result = await transform(
+    `<div xmlns:happy="https://example.com/schemas/happy">
+    <img src="jolly.avif" happy:smile="sweet"/>
+  </div>
+  `,
+    {
+      site: undefined,
+      sourcefile: '/Users/matthew/dev/astro/packages/astro/test/fixtures/astro-attrs/src/pages/namespaced.astro',
+      sourcemap: 'both',
+      internalURL: 'astro/internal',
+      preprocessStyle: async (value, attrs) => {
+        return null;
+      },
+    }
+  );
+
+  if (result.code[0] === '\x00') {
+    throw new Error('Corrupt output');
+  }
+}
+
+await run().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/test/test.mjs

@@ -0,0 +1,2 @@
+import './basic.test.mjs';
+import './output.test.mjs';

package/test/visible.test.mjs

@@ -0,0 +1,37 @@
+/* eslint-disable no-console */
+
+import { transform } from '@astrojs/compiler';
+
+async function run() {
+  const result = await transform(
+    `---
+    import ThemeToggleButton from './ThemeToggleButton.tsx';
+    ---
+    <style>
+      body {
+        background: blue;
+      }
+    </style>
+    <div>
+      <ThemeToggleButton client:visible />
+    </div>`,
+    {
+      sourcemap: true,
+      as: 'fragment',
+      site: undefined,
+      sourcefile: 'MoreMenu.astro',
+      sourcemap: 'both',
+      internalURL: 'astro/internal',
+      preprocessStyle: async (value, attrs) => {
+        return null;
+      },
+    }
+  );
+
+  // test
+  if (!result.code.includes(`{ modules: [{ module: $$module1, specifier: './ThemeToggleButton.tsx' }], hydratedComponents: [ThemeToggleButton], hoisted: [] }`)) {
+    throw new Error('Hydrated components not included');
+  }
+}
+
+await run();

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "declaration": true,
+    "noImplicitOverride": true,
+    "noUnusedLocals": true,
+    "esModuleInterop": true
+  },
+  "include": ["browser", "node", "shared"],
+  "exclude": ["node_modules"]
+}