FluentDOM (projectfluent#35)

* Initial landing of FluentDOM

* Use makefile

* Use meta info

* uncomment console js

* Make lint pass

* Apply feedback

* Add README.md

* Bump eslint version to work with async/await

* Use a jsdoc fork that supports async/await

* Apply feedback

* Split back into two files

* Update localization.js to match gecko one

* Fix a spelling

* Use raw id in Localization

* Apply feedback

* Minor spellings

* Even more awesome feedback from stas himself!

* Remove dead readme link

.eslintrc.json

@@ -1,6 +1,6 @@
 {
     "parserOptions": {
-        "ecmaVersion": 6,
+        "ecmaVersion": 8,
         "sourceType": "module"
     },
     "env": {

fluent-dom/README.md

@@ -0,0 +1,74 @@
+# fluent-dom
+
+`fluent-dom` provides DOM bindings for Project Fluent, a localization
+framework designed to unleash the expressive power of the natural language.
+
+## Installation
+
+`fluent-dom` can be used both on the client-side and the server-side.  You
+can install it from the npm registry or use it as a standalone script (as the
+`FluentDOM` global).
+
+    npm install fluent-dom
+
+
+## How to use
+
+The `DOMLocalization` constructor provides the core functionality of
+full-fallback ready message formatting. It uses a lazy-resolved
+`MessageContext` objects from the `fluent` package to format messages.
+
+On top of that, `DOMLocalization` can localize any DOMFragment by
+identifying localizable elements with `data-l10n-id` and translating them.
+
+```javascript
+import { DOMLocalization } from 'fluent-dom'
+
+const l10n = new DOMLocalization(MutationObserver, [
+  '/browser/main.ftl',
+  '/toolkit/menu.ftl'
+], generateMessages);
+
+l10n.connectRoot(document.documentElement);
+
+l10n.translateDocument();
+
+const h1 = document.querySelector('h1');
+
+// Sets `data-l10n-id` and `data-l10n-args` which triggers
+// the `MutationObserver` from `DOMLocalization` and translates the
+// element.
+l10n.setAttributes(h1, 'welcome', { user: 'Anna' });
+```
+
+For imperative uses straight from the JS code, there's also a `Localization`
+class that provides just the API needed to format messages in the running code.
+
+```javascript
+import { Localization } from 'fluent-dom'
+
+function *generateMessages() {
+  // Some lazy logic for yielding MessageContexts.
+  yield *[ctx1, ctx2];
+}
+
+const l10n = new Localization(document, [
+  '/browser/main.ftl',
+  '/toolkit/menu.ftl'
+], generateMessages);
+
+async function main() {
+  const msg = await l10n.formatValue('welcome', { name: 'Anna' });
+  // → 'Welcome, Anna!'
+}
+```
+
+## Learn more
+
+Find out more about Project Fluent at [projectfluent.io][], including
+documentation of the Fluent file format ([FTL][]), links to other packages and
+implementations, and information about how to get involved.
+
+
+[projectfluent.io]: http://projectfluent.io
+[FTL]: http://projectfluent.io/fluent/guide/

fluent-dom/makefile

@@ -0,0 +1,29 @@
+PACKAGE := fluent-dom
+GLOBAL := FluentDOM
+
+include ../common.mk
+
+build: $(PACKAGE).js compat.js
+
+$(PACKAGE).js: $(SOURCES)
+	@rollup $(CURDIR)/src/index.js \
+		--format umd \
+		--banner "/* $(PACKAGE)@$(VERSION) */" \
+		--id $(PACKAGE) \
+		--name $(GLOBAL) \
+		--output $@
+	@echo -e " $(OK) $@ built"
+
+compat.js: $(SOURCES)
+	@rollup $(CURDIR)/src/index.js \
+		--config $(ROOT)/compat_config.js \
+		--format umd \
+		--banner "/* $(PACKAGE)@$(VERSION) */" \
+		--id $(PACKAGE) \
+		--name $(GLOBAL) \
+		--output $@
+	@echo -e " $(OK) $@ built"
+
+clean:
+	@rm -f $(PACKAGE).js compat.js
+	@echo -e " $(OK) clean"

fluent-dom/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "fluent-dom",
+  "version": "0.0.1",
+  "description": "Fluent bindings for DOM",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/projectfluent/fluent.js.git"
+  },
+  "author": "Mozilla <[email protected]>",
+  "license": "Apache-2.0",
+  "contributors": [
+    {
+      "name": "Zibi Braniecki",
+      "email": "[email protected]"
+    },
+    {
+      "name": "Staś Małolepszy",
+      "email": "[email protected]"
+    }
+  ],
+  "directories": {
+    "lib": "./src"
+  },
+  "main": "./fluent-dom.js",
+  "module": "./src/index.js",
+  "keywords": [
+    "localization",
+    "l10n"
+  ],
+  "engine": {
+    "node": ">=6"
+  }
+}