Add type declarations (#59)

src/@types/renderer.ts

@@ -0,0 +1,25 @@
+export interface DynamicRenderContext {
+  componentUrl: string;
+  componentExport: string;
+  frameworkUrls: string;
+}
+
+export interface ComponentRenderer {
+  renderStatic: StaticRendererGenerator;
+  render(context: { root: string; Component: string; props: string; [key: string]: string }): string;
+  imports?: Record<string, string[]>;
+}
+
+export interface ComponentContext {
+  'data-astro-id': string;
+  root: string;
+}
+
+export type StaticRenderer = (props: Record<string, any>, ...children: any[]) => Promise<string>;
+export type StaticRendererGenerator<T = any> = (Component: T) => StaticRenderer;
+export type DynamicRenderer = (props: Record<string, any>, ...children: any[]) => Promise<string>;
+export type DynamicRendererContext<T = any> = (Component: T, renderContext: DynamicRenderContext) => DynamicRenderer;
+export type DynamicRendererGenerator = (
+  wrapperStart: string | ((context: ComponentContext) => string),
+  wrapperEnd: string | ((context: ComponentContext) => string)
+) => DynamicRendererContext;

src/frontend/render/preact.ts

@@ -1,11 +1,12 @@
-import { Renderer, createRenderer } from './renderer';
 import { h, render } from 'preact';
 import { renderToString } from 'preact-render-to-string';
+import type { ComponentRenderer } from '../../@types/renderer';
+import { createRenderer } from './renderer';
 
 // This prevents tree-shaking of render.
 Function.prototype(render);
 
-const Preact: Renderer = {
+const Preact: ComponentRenderer = {
   renderStatic(Component) {
     return async (props, ...children) => renderToString(h(Component, props, ...children));
   },

src/frontend/render/react.ts

@@ -1,8 +1,9 @@
-import { Renderer, createRenderer } from './renderer';
+import type { ComponentRenderer } from '../../@types/renderer';
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
+import { createRenderer } from './renderer';
 
-const ReactRenderer: Renderer = {
+const ReactRenderer: ComponentRenderer = {
   renderStatic(Component) {
     return async (props, ...children) => ReactDOMServer.renderToString(React.createElement(Component, props, children));
   },

src/frontend/render/renderer.ts

@@ -1,18 +1,8 @@
-interface DynamicRenderContext {
-  componentUrl: string;
-  componentExport: string;
-  frameworkUrls: string;
-}
-
-export interface Renderer {
-  renderStatic(Component: any): (props: Record<string, any>, ...children: any[]) => Promise<string>;
-  render(context: { root: string; Component: string; props: string; [key: string]: string }): string;
-  imports?: Record<string, string[]>;
-}
+import type { ComponentRenderer, DynamicRenderContext, DynamicRendererGenerator, StaticRendererGenerator } from '../../@types/renderer';
 
 /** Initialize Astro Component renderer for Static and Dynamic components */
-export function createRenderer(renderer: Renderer) {
-  const _static: Renderer['renderStatic'] = (Component: any) => renderer.renderStatic(Component);
+export function createRenderer(renderer: ComponentRenderer) {
+  const _static: StaticRendererGenerator = (Component) => renderer.renderStatic(Component);
   const _imports = (context: DynamicRenderContext) => {
     const values = Object.values(renderer.imports ?? {})
       .reduce((acc, v) => {
@@ -31,12 +21,9 @@ export function createRenderer(renderer: Renderer) {
     const astroId = `${Math.floor(Math.random() * 1e16)}`;
     return { ['data-astro-id']: astroId, root: `document.querySelector('[data-astro-id="${astroId}"]')`, Component: 'Component' };
   };
-  const createDynamicRender = (
-    wrapperStart: string | ((context: ReturnType<typeof createContext>) => string),
-    wrapperEnd: string | ((context: ReturnType<typeof createContext>) => string)
-  ) => (Component: any, renderContext: DynamicRenderContext) => {
+  const createDynamicRender: DynamicRendererGenerator = (wrapperStart, wrapperEnd) => (Component, renderContext) => {
     const innerContext = createContext();
-    return async (props: Record<string, any>, ...children: any[]) => {
+    return async (props, ...children) => {
       let value: string;
       try {
         value = await _static(Component)(props, ...children);

src/frontend/render/svelte.ts

@@ -1,6 +1,7 @@
-import { Renderer, createRenderer } from './renderer';
+import type { ComponentRenderer } from '../../@types/renderer';
+import { createRenderer } from './renderer';
 
-const SvelteRenderer: Renderer = {
+const SvelteRenderer: ComponentRenderer = {
   renderStatic(Component) {
     return async (props, ...children) => {
       const { html } = Component.render(props);

src/frontend/render/vue.ts

@@ -1,8 +1,9 @@
+import type { ComponentRenderer } from '../../@types/renderer';
 import { renderToString } from '@vue/server-renderer';
 import { createSSRApp, h as createElement } from 'vue';
-import { Renderer, createRenderer } from './renderer';
+import { createRenderer } from './renderer';
 
-const Vue: Renderer = {
+const Vue: ComponentRenderer = {
   renderStatic(Component) {
     return async (props, ...children) => {
       const app = createSSRApp({

tsconfig.json

@@ -5,13 +5,13 @@
 
     /* Basic Options */
     // "incremental": true,                         /* Enable incremental compilation */
-    "target": "es2020",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
-    "module": "ES2020",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "target": "ES2020",                             /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "module": "ES2020",                             /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
     // "lib": [],                                   /* Specify library files to be included in the compilation. */
     // "allowJs": true,                             /* Allow javascript files to be compiled. */
     // "checkJs": true,                             /* Report errors in .js files. */
     // "jsx": "preserve",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
-    // "declaration": true,                         /* Generates corresponding '.d.ts' file. */
+    "declaration": true,                            /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                      /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                           /* Generates corresponding '.map' file. */
     // "outFile": "./",                             /* Concatenate and emit output to single file. */
@@ -44,7 +44,7 @@
     // "noPropertyAccessFromIndexSignature": true,  /* Require undeclared properties from index signatures to use element accesses. */
 
     /* Module Resolution Options */
-    "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "moduleResolution": "node",                     /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
     // "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */