Build @fluent/dom with TypeScript (#474)

Author: stasm

fluent-dom/.esdoc.json

@@ -1,2 +1,3 @@
+esm/
 /index.js
 /compat.js

fluent-dom/.gitignore

@@ -1,5 +1,7 @@
 .nyc_output
 coverage
-docs
+esm/.compiled
+src
 test
 makefile
+tsconfig.json

fluent-dom/.npmignore

@@ -4,7 +4,21 @@ DEPS    := cached-iterable:CachedIterable
 
 include ../common.mk
 
-test:
+lint:
+	@eslint --config $(ROOT)/eslint_src.json --max-warnings 0 src/
+	@eslint --config $(ROOT)/eslint_test.json --max-warnings 0 test/
+	@echo -e " $(OK) lint"
+
+.PHONY: compile
+compile: esm/.compiled
+
+esm/.compiled: $(SOURCES)
+	@tsc
+	@touch $@
+	@echo -e " $(OK) esm/ compiled"
+
+.PHONY: test
+test: esm/.compiled
 	@nyc --reporter=text --reporter=html mocha \
 	    --recursive --ui tdd \
 	    --require esm \
@@ -14,8 +28,8 @@ test:
 .PHONY: build
 build: index.js compat.js
 
-index.js: $(SOURCES)
-	@rollup $(CURDIR)/src/index.js \
+index.js: esm/.compiled
+	@rollup $(CURDIR)/esm/index.js \
 		--config $(ROOT)/bundle_config.js \
 		--banner "/* $(PACKAGE)@$(VERSION) */" \
 		--amd.id $(PACKAGE) \
@@ -24,8 +38,8 @@ index.js: $(SOURCES)
 		--output.file $@
 	@echo -e " $(OK) $@ built"
 
-compat.js: $(SOURCES)
-	@rollup $(CURDIR)/src/index.js \
+compat.js: esm/.compiled
+	@rollup $(CURDIR)/esm/index.js \
 		--config $(ROOT)/compat_config.js \
 		--banner "/* $(PACKAGE)@$(VERSION) */" \
 		--amd.id $(PACKAGE) \
@@ -34,6 +48,18 @@ compat.js: $(SOURCES)
 		--output.file $@
 	@echo -e " $(OK) $@ built"
 
-lint: _lint
-html: _html
-clean: _clean
+html:
+	@typedoc src \
+	    --out ../html/dom \
+	    --mode file \
+	    --excludeNotExported \
+	    --excludePrivate \
+	    --logger none \
+	    --hideGenerator
+	@echo -e " $(OK) html built"
+
+clean:
+	@rm -f esm/*.js esm/*.d.ts esm/.compiled
+	@rm -f index.js compat.js
+	@rm -rf .nyc_output coverage
+	@echo -e " $(OK) clean"

fluent-dom/makefile

@@ -18,11 +18,10 @@
       "email": "[email protected]"
     }
   ],
-  "directories": {
-    "lib": "./src"
-  },
+  "type": "commonjs",
   "main": "./index.js",
-  "module": "./src/index.js",
+  "module": "./esm/index.js",
+  "types": "./esm/index.d.ts",
   "keywords": [
     "localization",
     "l10n",

fluent-dom/package.json

@@ -1,6 +1,6 @@
 import assert from "assert";
 import { FluentBundle, FluentResource } from "@fluent/bundle/index";
-import DOMLocalization from "../src/dom_localization";
+import DOMLocalization from "../esm/dom_localization";
 
 async function* mockGenerateMessages(resourceIds) {
   const bundle = new FluentBundle(["en-US"]);

fluent-dom/test/dom_localization_test.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import translateElement from '../src/overlay';
+import translateElement from '../esm/overlay';
 import {elem} from './index';
 
 suite('Localized text markup', function() {

fluent-dom/test/extra_text_markup_test.js

@@ -1,6 +1,6 @@
 import assert from "assert";
 import { FluentBundle, FluentResource } from "@fluent/bundle/index";
-import Localization from "../src/localization";
+import Localization from "../esm/localization";
 
 async function* mockGenerateMessages(resourceIds) {
   const bundle = new FluentBundle(["en-US"]);

fluent-dom/test/localization_test.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import translateElement from '../src/overlay';
+import translateElement from '../esm/overlay';
 import {elem} from './index';
 
 suite('Top-level attributes', function() {

fluent-dom/test/overlay_attributes_test.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import translateElement from '../src/overlay';
+import translateElement from '../esm/overlay';
 import {elem} from './index';
 
 suite('Child without name', function() {

fluent-dom/test/overlay_functional_children_test.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import translateElement from '../src/overlay';
+import translateElement from '../esm/overlay';
 import {elem} from './index';
 
 suite('Applying translations', function() {

fluent-dom/test/overlay_test.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import translateElement from '../src/overlay';
+import translateElement from '../esm/overlay';
 import {elem} from './index';
 
 suite('Text-semantic argument elements', function() {

fluent-dom/test/overlay_text_children_test.js

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+        "target": "es2019",
+        "module": "es2015",
+        "strict": true,
+        "allowJs": true,
+        "esModuleInterop": true,
+        "moduleResolution": "node",
+        "noEmitHelpers": true,
+        "declaration": true,
+        "outDir": "./esm"
+    },
+    "include": [
+        "./src/**/*"
+    ]
+}