support TypeScript-format config (#1253)

* support TypeScript-format config

* update docs

* fix lint error

* re-implement importing TS-format config

* add compat usage

* build TS-format config file with "esbuild"

* add error message when failed to load config

* update snapshot

* Update 10-reference.md

Co-authored-by: Fred K. Schott <[email protected]>

snowpack/src/config.ts

@@ -2,8 +2,10 @@ import buildScriptPlugin from '@snowpack/plugin-build-script';
 import runScriptPlugin from '@snowpack/plugin-run-script';
 import {cosmiconfigSync} from 'cosmiconfig';
 import {all as merge} from 'deepmerge';
+import esbuild from 'esbuild';
 import http from 'http';
 import {validate, ValidatorResult} from 'jsonschema';
+import os from 'os';
 import path from 'path';
 import yargs from 'yargs-parser';
 
@@ -826,13 +828,36 @@ export function createConfiguration(
 
 export function loadAndValidateConfig(flags: CLIFlags, pkgManifest: any): SnowpackConfig {
   const explorerSync = cosmiconfigSync(CONFIG_NAME, {
-    // only support these 4 types of config for now
+    // only support these 5 types of config for now
     searchPlaces: [
       'package.json',
       'snowpack.config.cjs',
       'snowpack.config.js',
+      'snowpack.config.ts',
       'snowpack.config.json',
     ],
+    loaders: {
+      '.ts': (configPath) => {
+        const outPath = path.join(os.tmpdir(), '.snowpack.config.cjs');
+
+        try {
+          esbuild.buildSync({
+            entryPoints: [configPath],
+            outfile: outPath,
+            bundle: true,
+            platform: 'node',
+          });
+
+          const exported = require(outPath);
+          return exported.default || exported;
+        } catch (error) {
+          logger.error(
+            'Warning: TypeScript config file support is still experimental. Consider moving to JavaScript if you continue to have problems.',
+          );
+          throw error;
+        }
+      },
+    },
     // don't support crawling up the folder tree:
     stopDir: path.dirname(process.cwd()),
   });

test/build/config-ts-format/__snapshots__

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snowpack build config-ts-format: allFiles 1`] = `
+Array [
+  "__snowpack__/env.js",
+  "_dist_/index.js",
+]
+`;
+
+exports[`snowpack build config-ts-format: build/__snowpack__/env.js 1`] = `"export default {\\"MODE\\":\\"production\\",\\"NODE_ENV\\":\\"production\\"};"`;
+
+exports[`snowpack build config-ts-format: build/_dist_/index.js 1`] = `"console.log('fooey');"`;

test/build/config-ts-format/export.ts

@@ -0,0 +1 @@
+export default '/_dist_';

test/build/config-ts-format/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "version": "1.0.1",
+  "name": "@snowpack/test-config-ts-format",
+  "description": "Test for TypeScript-format config file.",
+  "scripts": {
+    "testbuild": "snowpack build"
+  },
+  "devDependencies": {
+    "snowpack": "^2.12.1"
+  }
+}

test/build/config-ts-format/snowpack.config.ts

@@ -0,0 +1,10 @@
+import type {SnowpackConfig} from '../../../snowpack/src';
+import dist from './export';
+
+const config: Partial<SnowpackConfig> = {
+  mount: {
+    './src': dist,
+  },
+};
+
+export default config;

test/build/config-ts-format/src/index.js

@@ -0,0 +1 @@
+console.log('fooey');