Giter VIP home page Giter VIP logo

fluent-web's Introduction

@fluent/web

@fluent/web is a runtime polyfill that binds Fluent and FluentDOM into a vanilla Web platform (HTML, DOM, JS).

Installation

@fluent/web provides a glue code that is executed at runtime to construct DOMLocalization, bind it to document.l10n, perform initial document translation and set the event listeners and MutationObserver.

The result fluent-web.js file should be included in the HTML file and any code executing after it will have access to the FluentWeb API.

Quick start

Clone and run the projectfluent/fluent-web repository to see the examples:

git clone https://github.com/projectfluent/fluent-web
cd fluent-web
npm install
npm start
open http://127.0.0.1:8080/examples/simple.html

How to use

The primary access point is the document.l10n object of class DOMLocalization. It is already constructed based on the resources linked from the document and localized into languages negotiated based on the available languages from the <meta> tag and languages requested via navigator.languages.

<html>
  <head>
    <meta name="defaultLanguage" content="en-US">
    <meta name="availableLanguages" content="en-US, fr">
    <link rel="localization" href="locales/{locale}/main.ftl">
    <link rel="localization" href="locales/{locale}/head.ftl">
    <script defer src="./src/fluent-web.js"></script>
  </head>
  <body>
    <h1 data-l10n-id="hello-world"/>
  </body>
</html>
function showMessage() {
  let msg = await document.l10n.formatValue('confirm-msg')
  alert(msg);
}

let h1 = document.querySelector('h1');
document.l10n.setAttributes(h1, 'welcome', { user: 'Anna' });

Learn more

Find out more about Project Fluent at projectfluent.org, including documentation of the Fluent file format (FTL), links to other packages and implementations, and information about how to get involved.

fluent-web's People

Contributors

pdehaan avatar romulocintra avatar stasm avatar zbraniecki avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Forkers

zbraniecki romulocintra pdehaan nftico seanpm2001

fluent-web's Issues

publish minified content to npm?

We're using fluent-web on the upcoming TestPilot site, but I noticed that when we copy the assets over from ./node_modules/ the contents aren't minified.

https://github.com/mozilla/testpilot/blob/852c88f9664f6d5ddc415fd6f5a86cd751243d64/bin/build-static-dist.js#L12-L13

Other files you could potentially not publish to the npm bundle are:

  • .eslintrc.js
  • CHANGELOG.md
  • common.mk
  • ./examples/*
  • rollup_config.js
$ tree ./node_modules/fluent-web -a

./node_modules/fluent-web
├── .eslintrc.js [50B]
├── CHANGELOG.md [328B]
├── README.md [2K]
├── common.mk [1.4K]
├── examples/
│   ├── localization/
│   │   ├── en-US/
│   │   │   ├── fluent-widget.ftl
│   │   │   └── main.ftl
│   │   └── pl/
│   │       ├── fluent-widget.ftl
│   │       └── main.ftl
│   ├── simple.html
│   └── webcomponent.html
├── fluent-web.js [79K]
├── package.json [2.2K]
├── rollup_config.js [222B]
└── src/
    └── index.js [2K]

5 directories, 14 files

simple example doesn't work?

After I clone the repo, I tried make build and got:

/Users/lcrouch/code/projectfluent/fluent-web/src/index.js → fluent-web.js...
[!] Error: Could not resolve '../../fluent.js/fluent-dom/src/index' from src/index.js
Error: Could not resolve '../../fluent.js/fluent-dom/src/index' from src/index.js
    at error (/Users/lcrouch/code/projectfluent/fluent-web/node_modules/rollup/dist/rollup.js:3461:30)
    at /Users/lcrouch/code/projectfluent/fluent-web/node_modules/rollup/dist/rollup.js:21860:25
    at <anonymous>

make: *** [fluent-web.js] Error 1

I did git clone [email protected]:projectfluent/fluent.js.git alongside fluent-web and was able to get:

/Users/lcrouch/code/projectfluent/fluent-web/src/index.js → fluent-web.js...
(!) Unresolved dependencies
https://github.com/rollup/rollup/wiki/Troubleshooting#treating-module-as-external-dependency
cached-iterable (imported by ../fluent.js/fluent-dom/src/localization.js)
(!) Circular dependency: node_modules/fluent-langneg/src/locale.js -> node_modules/fluent-langneg/src/subtags.js -> node_modules/fluent-langneg/src/locale.js
created fluent-web.js in 168ms
 ✓ fluent-web.js built

But when I open examples/simple.html I see this error in the console:

SyntaxError: import declarations may only appear at top level of a module fluent-web.js:2

Publish to npm?

Re: https://www.npmjs.com/package/fluent-web

$ npm init -y && npm i fluent-web -S
Wrote to /Users/pdehaan/dev/tmp/fluent-web-test/package.json:

{
  "name": "fluent-web-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Peter deHaan <[email protected]> (https://about.me/peterdehaan)",
  "license": "MPL-2.0"
}


npm ERR! code E404
npm ERR! 404 Not Found: fluent-web@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/pdehaan/.npm/_logs/2018-10-02T22_21_54_620Z-debug.log

You may want to publish something/anything to npm to reserve the package name.

Package full build of fluent-web.js on npm / build command is failing

npm installation doesn't include the built file fluent-web.js

ls-fluent

Unfortunately I can't just build it myself locally (may be cus I'm running npm start inside of WSL but I usually don't run into issues like this.

Here is the error I get in my console:

meandave@LAPTOP-NA0Q0G86:/mnt/c/Users/Dave Justice/Code/fluent-web$ npm start

> [email protected] start /mnt/c/Users/Dave Justice/Code/fluent-web
> make -f makefile build & npx http-server ./examples

fs.js:1657
      binding.lstat(baseLong);
              ^

Error: ENOENT: no such file or directory, lstat '/mnt/c/Users/Dave'
    at Object.realpathSync (fs.js:1657:15)
    at runRollup (/mnt/c/Users/Dave Justice/Code/fluent-web/node_modules/rollup/bin/rollup:1946:29)
    at Object.<anonymous> (/mnt/c/Users/Dave Justice/Code/fluent-web/node_modules/rollup/bin/rollup:2010:5)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:191:16)
makefile:9: recipe for target 'fluent-web.js' failed
make: *** [fluent-web.js] Error 1
Starting up http-server, serving ./examples
Available on:
  http://169.254.82.6:8080
  http://127.0.0.1:8080
  http://192.168.1.2:8080
Hit CTRL-C to stop the server

In the browser I'm seeing the same error as mentioned in #2

SyntaxError: import declarations may only appear at top level of a module

Convert to "import .. from fluent-dom"?

fluent-web/src/index.js

Line 5 in 4458ff0

import { DOMLocalization } from "../../fluent.js/fluent-dom/src/index";

I think that should just be:

import { DOMLocalization } from "fluent-dom";

From the looks of it, the current version leaks outside of the git repo into a parent folder looking for files (which fails for me locally because I don't have a fluent.js folder or fluent-dom cloned).

More README instructions on how to use Make

I'm struggling w/ the Make commands, and I think it's assuming that I have some globally installed modules.

In order to get $ make build to build locally, I had to do some tweaking and install rollup locally as a devDep:

diff --git a/makefile b/makefile
index 52847af..a125590 100644
--- a/makefile
+++ b/makefile
@@ -6,7 +6,7 @@ include ./common.mk
 build: $(PACKAGE).js

 $(PACKAGE).js: $(SOURCES)
-       @rollup $(CURDIR)/src/index.js \
+       ./node_modules/.bin/rollup $(CURDIR)/src/index.js \
                --config $(CURDIR)/rollup_config.js \
                --banner "/* $(PACKAGE)@$(VERSION) */" \
                --name $(GLOBAL) \
(END)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.