split into different tasks

bin/generate-html.js

@@ -1,45 +1,13 @@
 "use strict";
-const path = require("path");
-const fs = require("fs");
-const template = require("../src/html/base-template");
-
-const LOCALE_DATA_PATH = path.join(__dirname, "../node_modules/react-intl/lib/locale-data");
-const MESSAGES_PATH = path.join(__dirname, "../l10n");
-const DEFAULT_LOCALE = "en";
-
-function readFileIfExists(filepath) {
-  try {
-    return fs.readFileSync(filepath, "utf8");
-  } catch (e) {
-    if (e.code !== "ENOENT") {
-      throw e;
-    } else {
-      return;
-    }
+const template = require("../src/html/templates").base;
+
+process.stdout.write(template({
+  // todo: read from args
+  locale: "en-US",
+  title: "New Tab",
+  paths: {
+    css: "./main.css",
+    js: "./main.js",
+    localeData: "./locale-data.js"
   }
-}
-
-function readLocaleDataFile(locale, sync) {
-  const text = readFileIfExists(path.join(LOCALE_DATA_PATH, locale + ".js"));
-  return text ? text.replace("module.exports", "window.reactIntlLocaleData") : text;
-}
-
-function getMessages(locale) {
-  // TODO - figure out how we handle these cases
-  if (locale === "en") locale = "en-US";
-  const text = readFileIfExists(path.join(MESSAGES_PATH, locale + "/strings.json"));
-  return text ? JSON.parse(text) : text;
-}
-
-const defaultLocaleData = readLocaleDataFile(DEFAULT_LOCALE);
-const defaultMessages = getMessages(DEFAULT_LOCALE);
-
-function generateHTML(locale) {
-  locale = locale || DEFAULT_LOCALE;
-  const baseLocale = locale.split("-")[0];
-  const localeData = readLocaleDataFile(locale) || readLocaleDataFile(baseLocale) || defaultLocaleData;
-  const messages = getMessages(locale) || getMessages(baseLocale) || defaultMessages;
-  return template({locale, messages, localeData});
-}
-
-process.stdout.write(generateHTML(DEFAULT_LOCALE));
+}));

bin/generate-locale-data.js

@@ -0,0 +1,45 @@
+"use strict";
+const path = require("path");
+const fs = require("fs");
+const template = require("../src/html/templates").localeData;
+
+const LOCALE_DATA_PATH = path.join(__dirname, "../node_modules/react-intl/lib/locale-data");
+const MESSAGES_PATH = path.join(__dirname, "../l10n");
+const DEFAULT_LOCALE = "en";
+
+function readFileIfExists(filepath) {
+  try {
+    return fs.readFileSync(filepath, "utf8");
+  } catch (e) {
+    if (e.code !== "ENOENT") {
+      throw e;
+    } else {
+      return;
+    }
+  }
+}
+
+function readLocaleDataFile(locale, sync) {
+  const text = readFileIfExists(path.join(LOCALE_DATA_PATH, locale + ".js"));
+  return text ? text.replace("module.exports", "window.reactIntlLocaleData") : text;
+}
+
+function getMessages(locale) {
+  // TODO - figure out how we handle these cases
+  if (locale === "en") locale = "en-US";
+  const text = readFileIfExists(path.join(MESSAGES_PATH, locale + "/strings.json"));
+  return text ? JSON.parse(text) : text;
+}
+
+const defaultLocaleData = readLocaleDataFile(DEFAULT_LOCALE);
+const defaultMessages = getMessages(DEFAULT_LOCALE);
+
+function generateFile(locale) {
+  locale = locale || DEFAULT_LOCALE;
+  const baseLocale = locale.split("-")[0];
+  const localeData = readLocaleDataFile(locale) || readLocaleDataFile(baseLocale) || defaultLocaleData;
+  const messages = getMessages(locale) || getMessages(baseLocale) || defaultMessages;
+  return template({locale, messages, localeData});
+}
+
+process.stdout.write(generateFile(DEFAULT_LOCALE));

package.json

@@ -4,17 +4,22 @@
   "description": "Remote new tab (third version)",
   "main": "src/main.js",
   "scripts": {
-    "setup": "npm run clean && npm run build:static && npm run build:html",
-    "start": "npm run setup && npm run watch:js & npm run watch:css",
-    "build": "npm run setup && npm run build:js && npm run build:css && npm run build:offline",
-    "clean": "rm -rf www && mkdir www",
-    "build:html": "node ./bin/generate-html.js > www/index.html",
-    "build:static": "cp -r src/static/* www",
-    "build:offline": "bin/generate-offline-files.js",
+    "setup": "npm-run-all setup:*",
+    "setup:clean": "rm -rf www && mkdir www",
+    "setup:html": "node ./bin/generate-html.js > www/index.html",
+    "setup:intl": "node ./bin/generate-locale-data > www/locale-data.js",
+    "setup:static": "cp -r src/static/* www",
+    "setup:fake": "touch www/main.js www/main.css",
+    "setup:offline": "bin/generate-offline-files.js",
+
+    "build": "npm run setup && npm-run-all build:*",
     "build:js": "NODE_ENV=production webpack -p --optimize-dedupe",
     "build:css": "node-sass src/main.scss -o www",
+
+    "start": "npm run setup && npm-run-all --parallel watch:*",
     "watch:css": "npm run build:css && npm run build:css -- --source-map www/main.css.map -w -r",
     "watch:js": "webpack-dev-server --hot --port=1944 --content-base www",
+
     "test:watch": "karma start --no-single-run --browsers ChromeCanary",
     "test": "karma start",
     "test:codeclimate": "codeclimate-test-reporter < ./logs/reports/coverage/lcov/lcov.info",
@@ -70,6 +75,7 @@
     "nock": "^3.5.0",
     "node-fetch": "^1.3.3",
     "node-sass": "^3.4.2",
+    "npm-run-all": "^1.4.0",
     "react-addons-test-utils": "^0.14.5",
     "redux-mock-store": "0.0.3",
     "requirejs": "^2.1.20",

src/html/templates.js

@@ -0,0 +1,38 @@
+"use strict";
+
+module.exports.base = function (options) {
+  const locale = options.locale;
+  const paths = options.paths;
+  const title = options.title;
+  return `
+<!DOCTYPE html>
+<html lang="${locale}">
+<head>
+  <meta charset="utf-8">
+   <meta name="viewport" content="width=device-width user-scalable=no" />
+  <link rel="stylesheet" href="${paths.css}">
+  <title>${title}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="${paths.localeData}"></script>
+  <script src="${paths.js}"></script>
+</body>
+</html>
+`;
+};
+
+module.exports.localeData = function (options) {
+  const locale = options.locale;
+  const messages = options.messages;
+  const localeData = options.localeData;
+  return `
+// GENERATED FILE
+
+// These are our strings
+window.newTabLocalInfo = {locale: "${locale}", messages: ${JSON.stringify(messages)}};
+
+// This is locale-specific code for react-intl
+${localeData}
+`;
+};

webpack.config.js

@@ -11,9 +11,7 @@ const distFilename = "main.js"
 // TODO: config
 const config = {
   DEVELOPMENT: true,
-  LOGGING: false,
-  LOCALE: 'en-US',
-  MESSAGES: require('./l10n/en-US/strings.json')
+  LOGGING: false
 };
 
 module.exports = {