Add support for page folders

Pages can be placed in folders in Webflow.

Before this change, those pages were ignored and simply
copied into the "public" directory.

After this change, files in the input ".appfairy" directory (and all
its subdirectories) are divided into HTML files and "other" files.

Other files are copied into the "public" folder and modified
in-place as needed (css, for example).

HTML files are transpiled into views and written into:
src/views/[folder/subfolder]/SomeView.js

Controllers are expected to be in the corresponding location:
src/controllers/[folder/subfolder]/SomeController.js

Child views (elements with af-el="name" attribute) are written
into the same directory as the parent view.

src/views/index.js only includes the root views and their childs.

This change makes it possible to create a namespace for a page and
its children by placing a page in a folder.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@awahlig/appfairy",
-  "version": "0.8.4",
+  "version": "0.8.5-alpha.8",
   "description": "A CLI tool to Migrate a Webflow project into a React app",
   "main": "build/appfairy.js",
   "bin": {

src/index.js

@@ -10,16 +10,17 @@ export const transpile = async (config) => {
   let outputFiles = []
 
   await Promise.all([
-    fs.readdir(config.input).then((files) => {
-      inputFiles = files
+    reread(config.input).then((files) => {
+      inputFiles = files.map((file) => path.relative(config.input, file))
     }),
     git.removeAppfairyFiles().then((files) => {
       outputFiles.push(...files)
     }),
   ])
 
-  const htmlFiles = inputFiles.filter(file => path.extname(file) == '.html')
-  const publicSubDirs = inputFiles.filter(file => !path.extname(file))
+  const isHTML = (file) => path.extname(file) == '.html'
+  const htmlFiles = inputFiles.filter(isHTML)
+  const publicFiles = inputFiles.filter(file => !isHTML(file))
 
   const scriptWriter = new ScriptWriter({
     baseUrl: config.input,
@@ -57,7 +58,7 @@ export const transpile = async (config) => {
 
   const makingPublicDir = makePublicDir(
     config,
-    publicSubDirs,
+    publicFiles,
   ).then((paths) => outputFiles.push(...paths))
 
   await Promise.all([
@@ -83,7 +84,8 @@ const transpileHTMLFile = async (
   const dataAttrs = $(':root').data()
 
   const viewWriter = new ViewWriter({
-    name: htmlFile.split('.').slice(0, -1).join('.'),
+    folder: path.dirname(htmlFile),
+    name: path.basename(htmlFile).split('.').slice(0, -1).join('.'),
     baseUrl: config.baseUrl,
     source: config.source,
   })
@@ -96,13 +98,13 @@ const transpileHTMLFile = async (
   return viewWriter
 }
 
-const makePublicDir = async (config, publicSubDirs) => {
+const makePublicDir = async (config, publicFiles) => {
   const publicDir = config.output.public
 
-  await Promise.all(publicSubDirs.map((publicSubDir) => {
+  await Promise.all(publicFiles.map((publicFile) => {
     return ncp(
-      `${config.input}/${publicSubDir}`,
-      `${publicDir}/${publicSubDir}`,
+      `${config.input}/${publicFile}`,
+      `${publicDir}/${publicFile}`,
     )
   }))
 

src/writers/view-writer.js

@@ -31,6 +31,11 @@ const flattenChildren = (children = [], flatten = []) => {
   return flatten
 }
 
+const dotRelative = (fromPath, toPath) => {
+  let result = path.relative(fromPath, toPath)
+  return result.startsWith('.') ? result : `./${result}`
+}
+
 @Internal(_)
 class ViewWriter extends Writer {
   static async writeAll(viewWriters, dir, ctrlsDir) {
@@ -39,17 +44,17 @@ class ViewWriter extends Writer {
     const indexFilePath = `${dir}/index.js`
     const helpersFilePath = `${dir}/helpers.js`
     const childFilePaths = [indexFilePath, helpersFilePath]
-    ctrlsDir = path.relative(dir, ctrlsDir)
-    viewWriters = flattenChildren(viewWriters)
 
     const writingViews = viewWriters.map(async (viewWriter) => {
       const filePaths = await viewWriter.write(dir, ctrlsDir)
       childFilePaths.push(...filePaths)
     })
 
-    const index = viewWriters.map((viewWriter) => {
-      return `export { default as ${viewWriter.className} } from './${viewWriter.className}'`
-    }).join('\n')
+    const index = flattenChildren(viewWriters
+      .filter((viewWriter) => viewWriter.folder == '.'))
+        .map((viewWriter) => (
+          `export { default as ${viewWriter.className} } from './${viewWriter.className}'`
+        )).join('\n')
 
     const writingIndex = fs.writeFile(indexFilePath, freeLint(index))
     const writingHelpers = fs.writeFile(helpersFilePath, raw.viewHelpers)
@@ -63,6 +68,14 @@ class ViewWriter extends Writer {
     return childFilePaths
   }
 
+  get folder() {
+    return this[_].folder
+  }
+
+  set folder(folder) {
+    this[_].folder = String(folder)
+  }
+
   get baseUrl() {
     return this[_].baseUrl
   }
@@ -169,6 +182,7 @@ class ViewWriter extends Writer {
       const child = new ViewWriter({
         name: elName,
         html: $.html($el),
+        folder: this.folder,
         baseUrl: this.baseUrl,
         styles: this.styles,
       })
@@ -297,22 +311,26 @@ class ViewWriter extends Writer {
     this.name = options.name
     this.html = options.html
     this.source = options.source
+    this.folder = options.folder
   }
 
   async write(dir, ctrlsDir) {
-    const filePath = `${dir}/${this.className}.js`
+    const filePath = path.normalize(`${dir}/${this.folder}/${this.className}.js`)
     const childFilePaths = [filePath]
 
     const writingChildren = this[_].children.map(async (child) => {
       const filePaths = await child.write(dir, ctrlsDir)
       childFilePaths.push(...filePaths)
     })
 
-    const writingSelf = fs.writeFile(`${dir}/${this.className}.js`, this[_].compose(ctrlsDir))
+    const writeSelf = async () => {
+      await fs.mkdir(path.dirname(filePath), { recursive: true })
+      await fs.writeFile(filePath, this[_].compose(dir, ctrlsDir))
+    }
 
     await Promise.all([
       ...writingChildren,
-      writingSelf,
+      writeSelf(),
     ])
 
     return childFilePaths
@@ -340,10 +358,15 @@ class ViewWriter extends Writer {
     }
   }
 
-  _compose(ctrlsDir) {
+  _compose(dir, ctrlsDir) {
+    const helpersPath = dotRelative(this.folder, 'helpers')
+    const ctrlPath = dotRelative(
+      `${dir}/${this.folder}`,
+      `${ctrlsDir}/${this.folder}/${this.ctrlClassName}`,
+    )
     return freeLint(`
       import React from 'react'
-      import { createScope, map, transformProxies } from './helpers'
+      import { createScope, map, transformProxies } from '${helpersPath}'
       ==>${this[_].composeChildImports()}<==
       const scripts = [
         ==>${this[_].composeScriptsDeclerations()}<==
@@ -356,7 +379,7 @@ class ViewWriter extends Writer {
           if (Controller) return Controller
 
           try {
-            Controller = require('${ctrlsDir}/${this.ctrlClassName}')
+            Controller = require('${ctrlPath}')
             Controller = Controller.default || Controller
 
             return Controller