New preact based frontend UI for the TTT.

Added rollup compiling

build/file.js

@@ -20,7 +20,7 @@ module.exports = exports = class File {
 
     const file = path.parse(filepath);
 
-    this._basename();
+    this._basename(file);
 
     this.kind     = kind(filepath);
     this.type     = type(filepath);
@@ -28,7 +28,7 @@ module.exports = exports = class File {
     this.cwd      = file.dir;
     this.ext      = this.preprocessed ? file.ext : normalizedExt(file.ext);
     this.name     = file.name;                        // index, fileA, fileB
-    this.basename = file.basename;               // index.ext, fileA.ext, fileB.ext
+    this.basename = file.base;               // index.ext, fileA.ext, fileB.ext
 
     const dir = this._dir(file.dir);
     if (dir) {
@@ -59,7 +59,7 @@ module.exports = exports = class File {
     if (file.name[0] === '_') {
       this.preprocessed = true;
       file.name = file.name.slice(1);
-      file.basename = file.basename.slice(1);
+      file.base = file.base.slice(1);
     }
   }
 

build/page-writer.js

@@ -8,6 +8,7 @@ const { siteInfo }  = require(resolve('package.json'));
 module.exports = exports = async function writePageContent (engines, pages, posts, prod) {
   const postIndex = index(posts, engines);
   await processPages(engines, [ ...posts, ...pages ], postIndex, prod);
+  postIndex.latest = { ...pageJSON(postIndex.latest), content: postIndex.latest.content };
   return postIndex;
 };
 
@@ -78,6 +79,7 @@ function pageState (page, posts) {
 
 function pageJSON (post) {
   return {
+    id: post.id,
     url: post.url,
     fullurl: post.fullurl,
     json: '/' + post.json,

build/post.js

@@ -72,6 +72,8 @@ module.exports = exports = class Post extends Page {
   _parse (...args) {
     super._parse(...args);
 
+    this.id = this.meta.id;
+
     if (!this.titlecard) this.titlecard = '/tweets/titlecard.png';
 
     this.meta.tags = (this.meta.tags || []).reduce((result, tag) => {

build/resolve.js

@@ -37,6 +37,7 @@ const EXT = exports.EXT = {
   CSS:  '.css',
   SCSS: '.scss',
   JS:   '.js',
+  JSX:  '.jsx',
 };
 
 const {
@@ -53,12 +54,14 @@ const {
   CSS,
   SCSS,
   JS,
+  JSX,
 } = EXT;
 
 const NORMALIZE_EXT = {
   [JPG]:  JPEG,
   [M4V]:  MP4,
   [HBS]:  HTML,
+  [JSX]:  JS,
 };
 
 const normalizedExt = exports.normalizedExt = (ext) => {
@@ -72,7 +75,7 @@ const isHandlebars = exports.isHandlebars  = is(XML, HBS, HTML);
 const isMarkdown   = exports.isMarkdown    = is(MD);
 const isPage       = exports.isPage        = is(isHandlebars, isMarkdown);
 const isAsset      = exports.isAsset       = is(isImage, isVideo);
-const isArtifact   = exports.isArtifact    = is(CSS, SCSS, JS);
+const isArtifact   = exports.isArtifact    = is(CSS, SCSS, JS, JSX);
 exports.isCleanUrl = is(HBS, MD);
 
 
@@ -92,7 +95,7 @@ exports.type = dictMatch({
   [TYPE.HANDLEBARS]: isHandlebars,
   [TYPE.MARKDOWN]:   isMarkdown,
   [TYPE.VIDEO]:      isVideo,
-  [TYPE.SCRIPT]:     is(JS),
+  [TYPE.SCRIPT]:     is(JS, JSX),
   [TYPE.STYLE]:      is(SCSS, CSS),
 }, TYPE.OTHER);
 

build/rollup.js

@@ -0,0 +1,53 @@
+
+const { resolve } = require('./resolve');
+const { rollup } = require('rollup');
+const alias = require('@rollup/plugin-alias');
+const commonjs = require('@rollup/plugin-commonjs');
+const nodeResolve = require('@rollup/plugin-node-resolve');
+const replace = require('@rollup/plugin-replace');
+const babel = require('rollup-plugin-babel');
+const svg = require('rollup-plugin-react-svg');
+const { terser } = require('rollup-plugin-terser');
+
+const plugins = [
+  replace({ 'process.env.NODE_ENV': '"production"' }),
+  alias({
+    entries: [
+      { find: 'react', replacement: 'preact/compat' },
+      { find: 'react-dom', replacement: 'preact/compat' },
+      { find: 'svg', replacement: resolve('svg') },
+      { find: 'utils', replacement: resolve('build/lib/util.js') },
+    ],
+  }),
+  svg(),
+  babel({
+    exclude: 'node_modules/**',
+  }),
+  nodeResolve(),
+  commonjs({
+    include: 'node_modules/**',
+  }),
+];
+
+
+module.exports = exports = async function (input, prod) {
+  const inputOptions = {
+    input,
+    plugins,
+  };
+
+  const outputOptions = {
+    format: 'iife',
+    sourcemap: 'inline',
+    plugins: prod
+      ? [ terser({ output: { comments: false } }) ]
+      : undefined,
+
+  };
+
+  const bundle = await rollup(inputOptions);
+  const output = await bundle.generate(outputOptions);
+
+  // console.log(output);
+  return output.output[0].code;
+};

build/scripts.js

@@ -1,9 +1,10 @@
 const glob = require('./lib/glob');
-const { ROOT, readFile } = require('./resolve');
+const { ROOT, readFile, resolve } = require('./resolve');
 const actions = require('./actions');
 const File = require('./file');
 const Promise = require('bluebird');
 const { minify } = require('terser');
+const rollup = require('./rollup');
 
 module.exports = exports = async function scripts (prod) {
   const globalFiles = await glob('js/_*.js', { cwd: ROOT, nodir: true });
@@ -18,10 +19,12 @@ module.exports = exports = async function scripts (prod) {
   const globalScript = new ClientScript('js/global.js');
   await globalScript.concat(globalFiles, prod);
 
-  const files = await Promise.map(glob('js/*.js', { cwd: ROOT, nodir: true }), async (filepath) => {
+  const files = await Promise.map(glob('js/*.{js,jsx}', { cwd: ROOT, nodir: true }), async (filepath) => {
     const f = new ClientScript(filepath);
-    if (f.preprocessed) return false;
+    if (f.globalScript) return false;
+
     await f.load(prod);
+
     return f;
   }).filter(Boolean);
 
@@ -35,12 +38,35 @@ module.exports = exports = async function scripts (prod) {
 
 class ClientScript extends File {
 
+  _basename (file) {
+    super._basename(file);
+
+    this.globalScript = false;
+    if (file.name[0] === '_') {
+      this.globalScript = true;
+      file.name = file.name.slice(1);
+      file.base = file.base.slice(1);
+    }
+
+    this.rollup = false;
+    if (file.name[0] === '$') {
+      this.rollup = true;
+      file.name = file.name.slice(1);
+      file.base = file.base.slice(1);
+    }
+  }
+
   _dir (dir) {
     dir = dir.split('/');
     return dir;
   }
 
   async load (prod) {
+    if (this.rollup) {
+      this.content = await rollup(resolve(this.input), prod);
+      return;
+    }
+
     let contents = (await readFile(this.input).catch(() => '')).toString('utf8');
     if (prod) {
       const { code, error } = minify(contents);