From 2ea353a4753ef82d6c85f991b368f04ea153c4e7 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Mon, 24 Jan 2022 12:34:29 +0100
Subject: [PATCH] chore(fs.dev): Webpack aliases to load local code from source

These changes force webpack to load the local pacakges (like
patterns and so on) from source, rather than from a compiled bundle.
This means that the lab site will reload whenever one makes changes
to pattern code.
---
 .../freesewing.lab/components/pattern-picker.js  |  7 +++----
 packages/freesewing.lab/hooks/useApp.js          |  1 +
 packages/freesewing.lab/next.config.mjs          | 10 +++++++++-
 .../page-templates/pattern-list.js               |  6 +++---
 packages/freesewing.lab/pages/blocks/brian.js    |  4 ++++
 .../components/wrappers/workbench.js             |  1 -
 packages/freesewing.shared/config/next.mjs       | 16 +++++++++++++++-
 7 files changed, 35 insertions(+), 10 deletions(-)
 create mode 100644 packages/freesewing.lab/pages/blocks/brian.js

diff --git a/packages/freesewing.lab/components/pattern-picker.js b/packages/freesewing.lab/components/pattern-picker.js
index 7d5a85ee970..dca79364251 100644
--- a/packages/freesewing.lab/components/pattern-picker.js
+++ b/packages/freesewing.lab/components/pattern-picker.js
@@ -1,5 +1,4 @@
 import React from 'react'
-import config from 'site/freesewing.config.js'
 import DesignIcon from 'shared/components/icons/design.js'
 import Link from 'next/link'
 
@@ -16,15 +15,15 @@ const PatternPicker = ({ app }) => {
           <span>Patterns</span>
         </div>
         <ul tabIndex="0" className="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 max-h-96 overflow-y-scroll">
-          {Object.keys(config.patterns).map(section => (
+          {Object.keys(app.patterns).map(section => (
             <React.Fragment key={section}>
               <li className={`
                 capitalize font-bold text-base-content text-center
                 opacity-50 border-b2 my-2 border-base-content
               `}>
-                  {t(config.navigation[section].__title)}
+                  {t(app.navigation[section].__title)}
               </li>
-              {config.patterns[section].map(pattern => (
+              {app.patterns[section].map(pattern => (
                 <li key={pattern}>
                   <Link href={`/${section}/${pattern}`}>
                     <button className="btn btn-sm btn-ghost text-base-content">
diff --git a/packages/freesewing.lab/hooks/useApp.js b/packages/freesewing.lab/hooks/useApp.js
index 332dbe7ee71..9c8acd6d17c 100644
--- a/packages/freesewing.lab/hooks/useApp.js
+++ b/packages/freesewing.lab/hooks/useApp.js
@@ -69,6 +69,7 @@ function useApp(full = true) {
   return {
     // Static vars
     site: 'lab',
+    patterns: config.patterns,
 
     // State
     language,
diff --git a/packages/freesewing.lab/next.config.mjs b/packages/freesewing.lab/next.config.mjs
index 086bd6666a4..509025da186 100644
--- a/packages/freesewing.lab/next.config.mjs
+++ b/packages/freesewing.lab/next.config.mjs
@@ -1,3 +1,11 @@
 import configBuilder from '../freesewing.shared/config/next.mjs'
+import config from './freesewing.config.mjs'
 
-export default configBuilder('lab')
+const allPatterns = []
+for (const section in config.patterns) {
+  for (const pattern of config.patterns[section]) {
+    allPatterns.push(pattern)
+  }
+}
+
+export default configBuilder('lab', [], allPatterns)
diff --git a/packages/freesewing.lab/page-templates/pattern-list.js b/packages/freesewing.lab/page-templates/pattern-list.js
index b2854bc9855..f0956b5dbab 100644
--- a/packages/freesewing.lab/page-templates/pattern-list.js
+++ b/packages/freesewing.lab/page-templates/pattern-list.js
@@ -13,7 +13,7 @@ const links = (section, list) => list.map(design => (
   </li>
 ))
 
-const ListPage = ({ sections=Object.keys(config.patterns) }) => {
+const PatternListPageTemplate = ({ sections=Object.keys(config.patterns) }) => {
   const app = useApp()
   return (
     <Page app={app} title="FreeSewing Lab" noSearch>
@@ -33,7 +33,7 @@ const ListPage = ({ sections=Object.keys(config.patterns) }) => {
       <div className="max-w-screen-md">
         {Object.keys(config.navigation).map(section => {
           if (sections.indexOf(section) !== -1) return (
-            <div>
+            <div key={section}>
               <h2>{config.navigation[section].__title}</h2>
               <ul className="flex flex-row flex-wrap gap-2">
                 {links(section, config.patterns[section])}
@@ -48,4 +48,4 @@ const ListPage = ({ sections=Object.keys(config.patterns) }) => {
   )
 }
 
-export default ListPage
+export default PatternListPageTemplate
diff --git a/packages/freesewing.lab/pages/blocks/brian.js b/packages/freesewing.lab/pages/blocks/brian.js
new file mode 100644
index 00000000000..b3fc7df6f4e
--- /dev/null
+++ b/packages/freesewing.lab/pages/blocks/brian.js
@@ -0,0 +1,4 @@
+import pattern from 'pkgs/brian/src/index.js'
+import PageTemplate from 'site/page-templates/workbench.js'
+
+export default () => <PageTemplate pattern={pattern} />
diff --git a/packages/freesewing.shared/components/wrappers/workbench.js b/packages/freesewing.shared/components/wrappers/workbench.js
index 77b994521e3..9817ab7f3df 100644
--- a/packages/freesewing.shared/components/wrappers/workbench.js
+++ b/packages/freesewing.shared/components/wrappers/workbench.js
@@ -38,7 +38,6 @@ const WorkbenchWrapper = ({ app, pattern }) => {
   // State for display mode and gist
   const [mode, setMode] = useState(null)
   const [gist, setGist] = useState(defaultGist(pattern, app.language))
-  const [fuck, setFuck] = useState('')
 
   // If we don't have the requiremed measurements,
   // force mode to measurements
diff --git a/packages/freesewing.shared/config/next.mjs b/packages/freesewing.shared/config/next.mjs
index 248aa7101c6..51ceaed483d 100644
--- a/packages/freesewing.shared/config/next.mjs
+++ b/packages/freesewing.shared/config/next.mjs
@@ -1,7 +1,17 @@
 import path from 'path'
 import remarkGfm from 'remark-gfm'
+import { patterns } from '../../../config/packages.mjs'
 
-const config = (site, remarkPlugins=[]) => ({
+/*
+ * This mehthod will return the NextJS configuration
+ * Parameters:
+ *
+ * site: one of 'dev', 'org', or 'lab'
+ * remarkPlugins: Array of remark plugins to load
+ * srcPkgs: Array of folders in the monorepo/packages that should be aliased
+ * so they are loaded from source, rather than from a compiled bundle
+ */
+const config = (site, remarkPlugins=[], srcPkgs=[]) => ({
   experimental: {
     externalDir: true,
     esmExternals: true,
@@ -48,6 +58,10 @@ const config = (site, remarkPlugins=[]) => ({
     config.resolve.alias.site = path.resolve(`../freesewing.${site}/`)
     config.resolve.alias.markdown = path.resolve(`../../markdown/${site}/`)
     config.resolve.alias.pkgs = path.resolve(`../`)
+    // This forces webpack to load the code from source, rather than compiled bundle
+    for (const pkg of srcPkgs) {
+      config.resolve.alias[`@freesewing/${pkg}$`] = path.resolve(`../${pkg}/src/index.js`)
+    }
 
     return config
   }