feat: add civet support

package.json

@@ -60,6 +60,7 @@
     "@babel/preset-env": "^7.20.2",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@danielx/civet": "^0.6.2",
     "@kiwi/eslint-config": "^2.0.2",
     "@kiwi/prettier-config": "^2.0.2",
     "@types/babel__core": "^7.1.20",
@@ -96,6 +97,7 @@
   },
   "peerDependencies": {
     "@babel/core": "^7.10.2",
+    "@danielx/civet": "^0.6.2",
     "coffeescript": "^2.5.1",
     "less": "^3.11.3 || ^4.0.0",
     "postcss": "^7 || ^8",

src/index.ts

@@ -15,5 +15,6 @@ export { default as scss, default as sass } from './processors/scss';
 export { default as stylus } from './processors/stylus';
 export { default as postcss } from './processors/postcss';
 export { default as globalStyle } from './processors/globalStyle';
+export { default as civet } from './processors/civet';
 export { default as babel } from './processors/babel';
 export { default as replace } from './processors/replace';

src/modules/language.ts

@@ -41,6 +41,7 @@ export const ALIAS_MAP = new Map([
 export const SOURCE_MAP_PROP_MAP: Record<string, [string[], any]> = {
   babel: [['sourceMaps'], true],
   typescript: [['compilerOptions', 'sourceMap'], true],
+  civet: [['compilerOptions', 'sourceMap'], true],
   scss: [['sourceMap'], true],
   less: [['sourceMap'], {}],
   stylus: [['sourcemap'], true],

src/processors/civet.ts

@@ -0,0 +1,32 @@
+import { prepareContent } from '../modules/prepareContent';
+import { getTagInfo } from '../modules/tagInfo';
+import { concat } from '../modules/utils';
+
+import type { Options, PreprocessorGroup } from '../types';
+
+export default (options?: Options.Typescript): PreprocessorGroup => ({
+  async script(svelteFile) {
+    const { transformer } = await import('../transformers/civet');
+    let { content, markup, filename, attributes, lang, dependencies } =
+      await getTagInfo(svelteFile);
+
+    if (lang !== 'civet') {
+      return { code: content };
+    }
+
+    content = prepareContent({ options, content });
+
+    const transformed = await transformer({
+      content,
+      markup,
+      filename,
+      attributes,
+      options,
+    });
+
+    return {
+      ...transformed,
+      dependencies: concat(dependencies, transformed.dependencies),
+    };
+  },
+});

src/transformers/civet.ts

@@ -0,0 +1,38 @@
+import { isAbsolute, resolve } from 'path';
+
+import { compile } from '@danielx/civet';
+
+import { transformer as tsTransform } from './typescript';
+
+import type { Options, Transformer } from '../types';
+
+const transformer: Transformer<Options.Typescript> = async ({
+  content,
+  filename,
+  markup,
+  options = {},
+  attributes,
+}) => {
+  const basePath = process.cwd();
+
+  if (filename == null) return { code: content };
+
+  filename = isAbsolute(filename) ? filename : resolve(basePath, filename);
+
+  const { code, sourceMap } = compile(content, {
+    filename,
+    js: false,
+    sourceMap: true,
+  });
+
+  return tsTransform({
+    content: code,
+    attributes,
+    filename,
+    map: sourceMap.json(filename, filename) as object,
+    markup,
+    options,
+  });
+};
+
+export { transformer };

src/types/index.ts

@@ -1,9 +1,9 @@
 import * as Options from './options';
 
 import type {
-  Processed as SvelteProcessed,
-  Preprocessor as SveltePreprocessor,
   PreprocessorGroup,
+  Preprocessor as SveltePreprocessor,
+  Processed as SvelteProcessed,
 } from 'svelte/types/compiler/preprocess';
 
 export { Options };
@@ -74,6 +74,7 @@ export type AutoPreprocessOptions = {
   // transformers
   babel?: TransformerOptions<Options.Babel>;
   typescript?: TransformerOptions<Options.Typescript>;
+  civet?: TransformerOptions<Options.Typescript>;
   scss?: TransformerOptions<Options.Sass>;
   sass?: TransformerOptions<Options.Sass>;
   less?: TransformerOptions<Options.Less>;

test/fixtures/CivetImports.svelte

@@ -0,0 +1,5 @@
+<script lang="civet">
+  { hello } from ./script.civet
+</script>
+
+{hello}

test/fixtures/script.civet

@@ -0,0 +1 @@
+export var hello = 'world'

test/processors/civet.test.ts

@@ -0,0 +1,53 @@
+import { civet } from '../../src';
+import { getFixtureContent, preprocess } from '../utils';
+
+const EXPECTED_SCRIPT = getFixtureContent('script.js');
+
+describe(`processor - civet`, () => {
+  it('should ignore other languages', async () => {
+    const template = `<script lang="potato">🥔</script>`;
+    const options = {};
+
+    const preprocessed = await preprocess(template, [civet(options)]);
+
+    expect(preprocessed.toString?.()).toBe(template);
+  });
+
+  it('should leave other languages untouched', async () => {
+    const template = `<script lang="potato">🥔</script>`;
+    const options = {
+      stripIndent: true,
+      prependData: '/* potato */',
+    };
+
+    const preprocessed = await preprocess(template, [civet(options)]);
+
+    expect(preprocessed.toString?.()).toBe(template);
+  });
+
+  it('should support external src files', async () => {
+    const template = `<script src="./fixtures/script.civet"></script>`;
+    const options = {
+      tsconfigFile: false,
+      compilerOptions: { module: 'es2015' },
+      prependData: '// potato',
+    };
+
+    const preprocessed = await preprocess(template, [civet(options)]);
+
+    expect(preprocessed.toString?.()).toContain(EXPECTED_SCRIPT);
+  });
+
+  it('should support prepended data', async () => {
+    const template = `<script src="./fixtures/script.civet"></script>`;
+    const options = {
+      tsconfigFile: false,
+      compilerOptions: { module: 'es2015' },
+      prependData: '### potato ###',
+    };
+
+    const preprocessed = await preprocess(template, [civet(options)]);
+
+    expect(preprocessed.toString?.()).toContain('/* potato */');
+  });
+});

test/transformers/civet.test.ts

@@ -0,0 +1,96 @@
+import sveltePreprocess from '../../src';
+import { getFixtureContent, preprocess, spyConsole } from '../utils';
+
+spyConsole({ silent: true });
+
+const EXPECTED_SCRIPT = getFixtureContent('script.js');
+
+describe('transformer - civet', () => {
+  const template = `<div></div><script lang="civet">${getFixtureContent(
+    'script.civet',
+  )}</script>`;
+
+  describe('configuration file', () => {
+    it('should work with no compilerOptions', async () => {
+      const opts = sveltePreprocess({ civet: { tsconfigFile: false } });
+      const preprocessed = await preprocess(template, opts);
+
+      expect(preprocessed.toString?.()).toContain('export var hello');
+    });
+
+    it('should work with tsconfigDirectory', async () => {
+      const opts = sveltePreprocess({
+        civet: {
+          tsconfigFile: false,
+          tsconfigDirectory: './test/fixtures',
+        },
+      });
+
+      const preprocessed = await preprocess(template, opts);
+
+      expect(preprocessed.toString?.()).toContain(EXPECTED_SCRIPT);
+    });
+
+    it('should work with tsconfigFile', async () => {
+      const opts = sveltePreprocess({
+        civet: {
+          tsconfigFile: './test/fixtures/tsconfig.json',
+        },
+      });
+
+      const preprocessed = await preprocess(template, opts);
+
+      expect(preprocessed.toString?.()).toContain(EXPECTED_SCRIPT);
+    });
+
+    it('should report config semantic errors in tsconfig file', () => {
+      const opts = sveltePreprocess({
+        civet: {
+          tsconfigFile: './test/fixtures/tsconfig.semantic.json',
+        },
+      });
+
+      return expect(preprocess(template, opts)).rejects.toThrow('TS6046');
+    });
+
+    it('should transpile ts to js', async () => {
+      const opts = sveltePreprocess({
+        civet: {
+          compilerOptions: {
+            module: 'es6',
+            sourceMap: false,
+          },
+        },
+      });
+
+      const { code } = await preprocess(template, opts);
+
+      expect(code).toContain(getFixtureContent('script.js'));
+    });
+
+    it('should strip unused and type imports', async () => {
+      const tpl = getFixtureContent('CivetImports.svelte');
+
+      const opts = sveltePreprocess({
+        civet: { tsconfigFile: false },
+      });
+
+      const { code } = await preprocess(tpl, opts);
+
+      expect(code).toContain(`import { hello } from "./script.civet"`);
+    });
+
+    it('should produce sourcemap', async () => {
+      const tpl = getFixtureContent('CivetImports.svelte');
+
+      const opts = sveltePreprocess({
+        civet: { tsconfigFile: false },
+        sourceMap: true,
+      });
+
+      const { map } = await preprocess(tpl, opts);
+
+      expect(map).toHaveProperty('sources', ['App.svelte']);
+    });
+  });
+});