Add support for React components.

This adds support for react components via a new `extensions` config in astro.config.mjs. In the future we can extend this to do things like look at the import statements, as Snowpack does.

examples/snowpack/astro.config.mjs

@@ -2,5 +2,8 @@
 export default {
  projectRoot: '.',
  hmxRoot: './astro',
- dist: './_site'
+ dist: './_site',
+ extensions: {
+ '.jsx': 'preact'
+ }
 }

examples/snowpack/package.json

@@ -44,6 +44,7 @@
  "postcss-preset-env": "^6.7.0",
  "prettier": "^2.0.5",
  "snowpack": "^3.1.0-pre.14",
+ "sass": "^1.32.8",
  "stylelint": "^13.8.0",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-rational-order": "^0.1.2",

package.json

@@ -27,6 +27,8 @@
  "dependencies": {
  "@types/estree": "0.0.46",
  "@types/node": "^14.14.31",
+ "@types/react": "^17.0.3",
+ "@types/react-dom": "^17.0.2",
  "@vue/server-renderer": "^3.0.7",
  "acorn": "^7.4.0",
  "acorn-jsx": "^5.3.1",
@@ -50,6 +52,7 @@
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "sass": "^1.32.8",
+ "snowpack": "^3.1.0-pre.14",
  "svelte": "^3.35.0",
  "vue": "^3.0.7",
  "yargs-parser": "^20.2.7"
@@ -72,7 +75,6 @@
  "preact": "^10.5.12",
  "preact-render-to-string": "^5.1.14",
  "prettier": "^2.2.1",
- "snowpack": "^3.1.0-pre.14",
  "typescript": "^4.2.3",
  "uvu": "^0.5.1"
  }

snowpack-plugin.cjs

@@ -3,7 +3,7 @@ const { readFile } = require('fs').promises;
 // Snowpack plugins must be CommonJS :(
 const transformPromise = import('./lib/transform2.js');
 
-module.exports = function (snowpackConfig, { resolve } = {}) {
+module.exports = function (snowpackConfig, { resolve, extensions } = {}) {
  return {
  name: 'snowpack-hmx',
  knownEntrypoints: ['deepmerge'],
@@ -15,7 +15,11 @@ module.exports = function (snowpackConfig, { resolve } = {}) {
  const { compileComponent } = await transformPromise;
  const projectRoot = snowpackConfig.root;
  const contents = await readFile(filePath, 'utf-8');
- const result = await compileComponent(contents, { compileOptions: { resolve }, filename: filePath, projectRoot });
+ const compileOptions = {
+ resolve,
+ extensions
+ };
+ const result = await compileComponent(contents, { compileOptions, filename: filePath, projectRoot });
  return result.contents;
  },
  };

src/@types/astro.ts

@@ -2,12 +2,16 @@ export interface AstroConfigRaw {
  dist: string;
  projectRoot: string;
  hmxRoot: string;
+ jsx?: string;
 }
 
+export type ValidExtensionPlugins = 'hmx' | 'react' | 'preact' | 'svelte' | 'vue';
+
 export interface AstroConfig {
  dist: string;
  projectRoot: URL;
  hmxRoot: URL;
+ extensions?: Record<string, ValidExtensionPlugins>
 }
 
 export interface JsxItem {

src/@types/compiler.ts

@@ -1,6 +1,8 @@
 import type { LogOptions } from '../logger';
+import type { ValidExtensionPlugins } from './astro';
 
 export interface CompileOptions {
  logging: LogOptions;
  resolve: (p: string) => string;
+ extensions?: Record<string, ValidExtensionPlugins>;
 }