refactor: introduce filter to renderers

packages/astro-renderer-preact/src/index.ts

@@ -11,7 +11,17 @@ interface PreactDependencies {
   client: {}
 }
 
+const validExtensions = new Set(['.jsx', '.tsx']);
+
 const renderer: AstroRenderer<PreactDependencies, ComponentType> = {
+
+  filter(id, { imports }) {
+    const ext = id.slice(0, -4);
+    if (!validExtensions.has(ext)) return;
+    if (!imports.has('preact')) return;
+    return true;
+  },
+
   jsx: {
     importSource: 'preact',
     factory: 'h',

packages/astro-renderer-react/src/index.ts

@@ -11,7 +11,17 @@ interface ReactDependencies {
   client: {}
 }
 
+const validExtensions = new Set(['.jsx', '.tsx']);
+
 const renderer: AstroRenderer<ReactDependencies, ComponentType> = {
+
+  filter(id, { imports }) {
+    const ext = id.slice(0, -4);
+    if (!validExtensions.has(ext)) return;
+    if (!imports.has('react')) return;
+    return true;
+  },
+
   jsx: {
     importSource: 'react',
     factory: 'createElement',

packages/astro-renderer-svelte/src/index.ts

@@ -14,6 +14,10 @@ interface SvelteDependencies {
 const renderer: AstroRenderer<SvelteDependencies, SvelteComponent> = {
   snowpackPlugin: ['@snowpack/plugin-svelte', { compilerOptions: { hydratable: true } }],
 
+  filter(id) {
+    return id.slice(0, -7) === '.svelte';
+  },
+
   server: {
     dependencies: ['./SvelteWrapper.svelte'],
     renderToStaticMarkup({ ["./SvelteWrapper.svelte"]: SvelteWrapper }) {

packages/astro-renderer-vue/src/index.ts

@@ -14,6 +14,10 @@ interface VueDependencies {
 const renderer: AstroRenderer<VueDependencies, ComponentType> = {
   snowpackPlugin: '@snowpack/plugin-vue',
 
+  filter(id) {
+    return id.slice(0, -4) === '.vue';
+  },
+
   jsx: {
     importSource: 'vue',
     factory: 'h'

packages/astro/src/@types/renderer-new.ts

@@ -37,7 +37,13 @@ export interface DependencyMap {
 
 export interface AstroRenderer<Dependencies extends DependencyMap = DependencyMap, ComponentType = any> {
   /** Optionally declare a snowpackPlugin which should be used to render your components */
-  snowpackPlugin?: string;
+  snowpackPlugin?: string|[string, Record<string, any>];
+
+  /** 
+    * Claim a file to use this renderer based on it's file name or imports 
+    * Returning `true` will claim a file to use this renderer, otherwise a `falsy` values will skip this renderer
+    */
+  filter(id: string, context: { imports: Set<string> }): boolean|undefined|null|void;
 
   /** Optionally define JSX behavior if this renderer relies on JSX */
   jsx?: {

packages/astro/src/index.ts

@@ -0,0 +1,5 @@
+// Public types for the `astro` package
+
+import { AstroConfig } from './@types/astro';
+
+export { AstroConfig };