Skip to content

Commit

Permalink
added experimental TypeScript support
Browse files Browse the repository at this point in the history
caveats:
* special-casing (cf. inline comment) complicates `generateConfig`
* there's barely any abstraction here (cf. inline comment); why bother?
* `generateTranspilerConfig` now actually only takes care of Babel
  configuration, which is likely confusing; we'll probably wanna move
  these details into transpiler-specific modules
* no tests yet; these are essential for mainline integration
* this anticipates a faucet-pipeline-typescript meta-package
* the sample seems pretty silly

Co-authored-by: FND <fnd@localhost.localdomain>
  • Loading branch information
tillsc and FND committed Feb 3, 2018
1 parent b89319c commit f45ead1
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 13 deletions.
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/node_modules
/.eslintcache

/samples/dist
/samples/*/dist
34 changes: 22 additions & 12 deletions lib/bundle/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,30 +24,40 @@ module.exports = generateConfig;
// * `moduleName` determines the global variable to hold the entry point's
// exports (if any)
// * `transpiler.features` determines the language features to be supported
// within source code (e.g. `["es2015", "jsx"]`)
// within source code (e.g. `["es2015", "typescript", "jsx"]`)
// * `transpiler.typescript` are TypeScript-specific options
// * `transpiler.jsx` are JSX-specific options (e.g. `{ pragma: "createElement" }`)
// * `transpiler.exclude` is a list of modules for which to skip transpilation
// (e.g. `["jquery"]`, perhaps due to an already optimized ES5 distribution)
function generateConfig({ extensions = [], // eslint-disable-next-line indent
externals, format, compact, moduleName, transpiler }) {
let plugins = [];
if(transpiler) {
let { features } = transpiler;
if(features && features.includes("jsx")) {
extensions = [".jsx"].concat(extensions);
}
let { features = [] } = transpiler;
if(features.includes("typescript")) { // XXX: special-casing

This comment has been minimized.

Copy link
@tillsc

tillsc Feb 4, 2018

Author

maybe we should add "tsx" for convenience too. this could result in a option for https://github.com/ezolenko/rollup-plugin-typescript2 (tsconfigDefaults.compilerOptions.jsx = 'React')

This comment has been minimized.

Copy link
@tillsc

tillsc Feb 4, 2018

Author

tsconfigDefaults will be overridden by tsconfig.json which seems rather perfect for our scenario to me

This comment has been minimized.

Copy link
@FND

FND Feb 5, 2018

Author Contributor

Based on today's conversation, how would we invoke rollup-plugin-typescript2?

let ts = require("rollup-plugin-typescript2");

ts({
    tsconfigDefaults: {
        compilerOptions: {
            jsxFactory: bundleConfig.jsx // e.g. `"createElement"`
        }
    }
});

(according to https://www.typescriptlang.org/docs/handbook/jsx.html, React is still hard-coded ¯\_(ツ)_/¯ )

This comment has been minimized.

Copy link
@tillsc

tillsc Feb 6, 2018

Author

React isn't hard coded: jsxFactory can take a namespace too (see https://www.typescriptlang.org/docs/handbook/compiler-options.html)

let ts = requireOptional("rollup-plugin-typescript2",
"failed to activate TypeScript", "faucet-pipeline-typescript");
// TODO: provide defaults and abstractions for low-level options
let { typescript } = transpiler;
plugins.push(typescript ? ts(typescript) : ts());
} else {
if(features.includes("jsx")) {
extensions = [".jsx"].concat(extensions);
}

let babel = requireOptional("rollup-plugin-babel",
"failed to activate transpiler", "faucet-pipeline-esnext");
let settings = generateTranspilerConfig(transpiler);
transpiler = babel(settings);
let babel = requireOptional("rollup-plugin-babel",
"failed to activate transpiler", "faucet-pipeline-esnext");
let settings = generateTranspilerConfig(transpiler);
plugins.push(babel(settings));
}
}

let resolve = { jsnext: true };
if(extensions.length) {
resolve.extensions = [".js"].concat(extensions);
}

let plugins = (transpiler ? [transpiler] : []).concat([
plugins = plugins.concat([
nodeResolve(resolve),
commonjs({ include: "node_modules/**" })
]);
Expand Down Expand Up @@ -81,7 +91,7 @@ function generateConfig({ extensions = [], // eslint-disable-next-line indent
});
}

function generateTranspilerConfig({ features, jsx = {}, exclude }) {
function generateTranspilerConfig({ features, jsx, exclude }) {
let settings = {};
let plugins = [];

Expand All @@ -102,7 +112,7 @@ function generateTranspilerConfig({ features, jsx = {}, exclude }) {
}

if(features.includes("jsx")) {
plugins.push(["transform-react-jsx", jsx]);
plugins.push(["transform-react-jsx", jsx || {}]);
}

if(plugins.length) {
Expand Down
2 changes: 2 additions & 0 deletions samples/faucet.config.js → samples/esnext/faucet.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use strict";

module.exports = {
manifest: {
file: "./dist/manifest.json"
Expand Down
File renamed without changes.
File renamed without changes.
11 changes: 11 additions & 0 deletions samples/typescript/faucet.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
"use strict";

module.exports = {
js: [{
source: "./index.ts",
target: "./dist/bundle.js",
transpiler: {
features: ["typescript"]
}
}]
};
28 changes: 28 additions & 0 deletions samples/typescript/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { log, LogLevel } from "./util";

interface ComplexTitle {
main: string;
sub: string;
}

interface ArticleInterface {
title: string | ComplexTitle;
authors: string[];
}

let generateArticle = (params: ArticleInterface) => {
let { title, authors } = params;
if(typeof title !== "string") {
log(LogLevel.Debug, "auto-generating title");
title = `${title.main}: ${title.sub}`;
}
return title + "\n" + authors.join(", ");
};

generateArticle({
title: {
main: "Hello World",
sub: "sup"
},
authors: ["foo", "bar"]
});
9 changes: 9 additions & 0 deletions samples/typescript/util.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
export enum LogLevel { Debug, Info, Critical }

export function log(level: LogLevel, msg: string) {
if(level === LogLevel.Critical) {
console.error(msg);
} else {
console.log(msg);
}
}

0 comments on commit f45ead1

Please sign in to comment.