build frontend with webpack

frontend/App.js

@@ -1,13 +1,9 @@
-/**
-	Define your enyo/Application kind in this file.
-*/
+import kind from 'enyo/kind';
+import Application from 'enyo/Application';
 
-var
-	kind = require('enyo/kind'),
-	Application = require('enyo/Application'),
-	MainView = require('./views/MainView');
+import MainView from './views/MainView';
 
-module.exports = kind({
-	kind: Application,
-	view: MainView
+export default kind({
+  kind: Application,
+  view: MainView,
 });

frontend/baseurl.js

@@ -1,7 +1,8 @@
 // https://www.ietf.org/rfc/rfc3986.txt - page 50
-function parseURL(url) {
-  var re = new RegExp("^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?");
-  var res = url.match(re);
+export function parseURL(url) {
+  const re = new RegExp('^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?');
+  const res = url.match(re);
+
   return {
     scheme: res[2],
     authority: res[4],
@@ -15,21 +16,21 @@ function parseURL(url) {
  * Resolve URL url based off URL base (equivalent API to nodejs url.resolve with
  * arguments flipped)
  */
-function resolveURL(url, base) {
-  var p1 = parseURL(url);
-  var p2 = parseURL(base);
+export function resolveURL(url, base) {
+  const p1 = parseURL(url);
+  const p2 = parseURL(base);
 
   if (p1.scheme) return url;
 
-  if (p1.path.indexOf('/') == 0) {
-    return p2.scheme + '://' + p2.authority + p1.path + (p1.query ? '?' + p1.query : '');
+  if (p1.path.startsWith('/')) {
+    return `${p2.scheme}://${p2.authority}${p1.path}${p1.query ? `?${p1.query}` : ''}`;
   } else {
-    var b = (p2.path.lastIndexOf('/') != -1) ? p2.path.substring(0, p2.path.lastIndexOf('/')) : p2.path;
-    return p2.scheme + '://' + p2.authority + b + '/' + p1.path + (p1.query ? '?' + p1.query : '');
+    const b = p2.path.lastIndexOf('/') != -1 ? p2.path.substring(0, p2.path.lastIndexOf('/')) : p2.path;
+    return `${p2.scheme}://${p2.authority}${b}/${p1.path}${p1.query ? '?' + p1.query : ''}`;
   }
 }
 
-function test() {
+export function test() {
   // Some quick testcases...
   var testCases = [
     ['test', 'https://google.com', 'https://google.com/test'],
@@ -55,9 +56,3 @@ function test() {
     console.info(t[0], t[1], res, res == t[2]);
   });
 }
-
-module.exports = {
-  parseURL: parseURL,
-  resolveURL: resolveURL,
-  test: test,
-};

frontend/chore/MoonstoneResolverPlugin.ts

@@ -0,0 +1,20 @@
+import { NormalModuleReplacementPlugin, type ResolveData } from 'webpack';
+
+/**
+ * The plugin resolves Moonstone packages with non-standard 'moduleDir' property.
+ */
+export class MoonstoneResolverPlugin extends NormalModuleReplacementPlugin {
+  public constructor() {
+    super(/^(?:enyo(?:-ilib|-webos)?|layout|moonstone)/, MoonstoneResolverPlugin.resolve);
+  }
+
+  private static resolve(resource: ResolveData) {
+    const [name, ...path] = resource.request.split('/');
+
+    if (path.length > 0) {
+      const { moduleDir: root } = require(`${name}/package.json`);
+
+      resource.request = [name, root, ...path].join('/');
+    }
+  }
+}

frontend/configutils.js

@@ -1,50 +1,47 @@
-var repositoryBaseURL = 'https://repo.webosbrew.org/api/apps.json';
-var repositoryNonfreeBaseURL = 'https://repo.webosbrew.org/api/non-free/apps.json';
+export const repositoryBaseURL = 'https://repo.webosbrew.org/api/apps.json';
+export const repositoryNonfreeBaseURL = 'https://repo.webosbrew.org/api/non-free/apps.json';
 
-function getConfig() {
-  var repositoriesConfig = {
+export function getConfig() {
+  const repositoriesConfig = {
     repositories: [],
     disableDefault: false,
     enableNonfree: false,
   };
 
   try {
-    var parsed = JSON.parse(window.localStorage['repositoriesConfig']);
-    if (parsed.disableDefault !== undefined)
-      repositoriesConfig.disableDefault = parsed.disableDefault;
-    if (parsed.repositories !== undefined)
-      repositoriesConfig.repositories = parsed.repositories;
-    if (parsed.enableNonfree !== undefined)
-      repositoriesConfig.enableNonfree = parsed.enableNonfree;
+    const parsed = JSON.parse(window.localStorage.getItem('repositoriesConfig'));
+
+    Object.assign(repositoriesConfig, parsed);
   } catch (err) {
     console.warn('Config load failed:', err);
   }
 
   return repositoriesConfig;
 }
 
-function getRepositories() {
+export function getRepositories() {
   try {
-    var repositoriesConfig = getConfig();
-    var repos = repositoriesConfig.repositories.map(function (repo) { return repo.url; });
-    if (!repositoriesConfig.disableDefault) repos.push(repositoryBaseURL);
-    if (repositoriesConfig.enableNonfree) repos.push(repositoryNonfreeBaseURL);
-    return repos;
+    const { repositories, disableDefault, enableNonfree } = getConfig();
+
+    const urls = repositories.map(({ url }) => url);
+
+    if (!disableDefault) {
+      urls.push(repositoryBaseURL);
+    }
+
+    if (enableNonfree) {
+      urls.push(repositoryNonfreeBaseURL);
+    }
+
+    return urls;
   } catch (err) {
     console.warn(err);
+
     return [repositoryBaseURL];
   }
 }
 
-function setConfig(config) {
-  window.localStorage['repositoriesConfig'] = JSON.stringify(config);
+export function setConfig(config) {
+  window.localStorage.setItem('repositoriesConfig', JSON.stringify(config));
   console.info(window.localStorage['repositoriesConfig']);
 }
-
-module.exports = {
-  repositoryBaseURL: repositoryBaseURL,
-
-  getRepositories: getRepositories,
-  getConfig: getConfig,
-  setConfig: setConfig,
-};

frontend/index.js

@@ -1,13 +1,4 @@
-/**
-	Instantiate your enyo/Application kind in this file.  Note, application
-	rendering should be deferred until the DOM is ready by wrapping it in a
-	call to ready().
-*/
+import ready from 'enyo/ready';
+import App from './App';
 
-var
-  ready = require('enyo/ready'),
-  App = require('./App');
-
-ready(function () {
-  new App();
-});
+ready(() => new App());