Merge branch 'dev' into 1180-deprecate-pattern-parameters

Author: JosefBredereck

packages/engine-twig-php/lib/engine_twig_php.js

@@ -28,8 +28,7 @@ const engine_twig_php = {
   engineFileExtension: '.twig',
   expandPartials: false,
   findPartialsRE:
-    /{%\s*(?:extends|include|embed)\s+('[^']+'|"[^"]+").*?(with|%}|\s*%})/g,
-  findPartialKeyRE: /"((?:\\.|[^"\\])*)"|'((?:\\.|[^"\\])*)'/,
+    /{[%{]\s*.*?(?:extends|include|embed|from|import|use)\(?\s*['"](.+?)['"][\s\S]*?\)?\s*[%}]}/g,
   namespaces: [],
 
   /**
@@ -180,9 +179,7 @@ const engine_twig_php = {
   // return it.
   findPartial: function (partialString) {
     try {
-      let partial = partialString.match(this.findPartialKeyRE)[0];
-      partial = partial.replace(/"/g, '');
-      partial = partial.replace(/'/g, '');
+      const partial = partialString.replace(this.findPartialsRE, '$1');
 
       // Check if namespaces is not empty.
       const selectedNamespace = this.namespaces.filter((namespace) => {

packages/engine-twig/lib/engine_twig.js

@@ -51,7 +51,7 @@ class TwingLoaderPatternLab {
    * @throws TwingErrorLoader When name is not found
    */
   getSourceContext(name, from) {
-    var pattern = this.patterns.get(name);
+    const pattern = this.patterns.get(name);
     return Promise.resolve(
       new TwingSource(pattern.extendedTemplate, name, pattern.relPath)
     );
@@ -116,23 +116,23 @@ const fileSystemLoader = new TwingLoaderFilesystem();
 const patternLabLoader = new TwingLoaderPatternLab();
 const chainLoader = new TwingLoaderChain([fileSystemLoader, patternLabLoader]);
 const twing = new TwingEnvironment(chainLoader);
-var metaPath;
+let metaPath;
+let patternLabConfig = {};
 
-var engine_twig = {
+const engine_twig = {
   engine: twing,
   engineName: 'twig',
   engineFileExtension: '.twig',
 
   // regexes, stored here so they're only compiled once
   findPartialsRE:
-    /{%[-]?\s*(?:extends|include|embed|from|import|use)\s+('[^']+'|"[^"]+").*?%}/g,
-  findPartialKeyRE: /"((?:\\.|[^"\\])*)"/,
+    /{[%{]\s*.*?(?:extends|include|embed|from|import|use)\(?\s*['"](.+?)['"][\s\S]*?\)?\s*[%}]}/g,
   findListItemsRE:
     /({{#( )?)(list(I|i)tems.)(one|two|three|four|five|six|seven|eight|nine|ten|eleven|twelve|thirteen|fourteen|fifteen|sixteen|seventeen|eighteen|nineteen|twenty)( )?}}/g, // TODO
 
   // render it
   renderPattern: function renderPattern(pattern, data, partials) {
-    var patternPath = pattern.basePattern
+    let patternPath = pattern.basePattern
       ? pattern.basePattern.relPath
       : pattern.relPath;
     if (patternPath.lastIndexOf(metaPath) === 0) {
@@ -150,8 +150,15 @@ var engine_twig = {
 
   // find and return any {% include 'template-name' %} within pattern
   findPartials: function findPartials(pattern) {
-    var matches = pattern.template.match(this.findPartialsRE);
-    return matches;
+    const matches = pattern.template.match(this.findPartialsRE);
+    const filteredMatches =
+      matches &&
+      matches.filter((match) => {
+        // Filter out programmatically created includes.
+        // i.e. {% include '@namespace/icons/assets/' ~ name ~ '.svg' %}
+        return match.indexOf('~') === -1;
+      });
+    return filteredMatches;
   },
 
   // returns any patterns that match {{> value(foo:"bar") }} or {{>
@@ -161,18 +168,90 @@ var engine_twig = {
     // being implemented here.
     return [];
   },
+
   findListItems: function (pattern) {
-    var matches = pattern.template.match(this.findListItemsRE);
+    const matches = pattern.template.match(this.findListItemsRE);
     return matches;
   },
 
   // given a pattern, and a partial string, tease out the "pattern key" and
   // return it.
   findPartial: function (partialString) {
-    var partial = partialString.match(this.findPartialKeyRE)[0];
-    partial = partial.replace(/"/g, '');
+    try {
+      const partial = partialString.replace(this.findPartialsRE, '$1');
+
+      // Check if namespaces is not empty.
+      const [selectedNamespace] = fileSystemLoader
+        .getNamespaces()
+        .filter((namespace) => {
+          // Check to see if this partial contains within the namespace id.
+          return partial.indexOf(`@${namespace}`) !== -1;
+        });
+
+      let namespaceResolvedPartial = '';
+
+      if (selectedNamespace.length > 0) {
+        // Loop through all namespaces and try to resolve the namespace to a file path.
+        const namespacePaths = fileSystemLoader.getPaths(selectedNamespace);
+
+        for (let index = 0; index < namespacePaths.length; index++) {
+          const patternPath = path.isAbsolute(namespacePaths[index])
+            ? path.relative(
+                patternLabConfig.paths.source.root,
+                namespacePaths[index]
+              )
+            : namespacePaths[index];
+
+          // Replace the name space with the actual path.
+          // i.e. @atoms -> source/_patterns/atoms
+          const tempPartial = path.join(
+            process.cwd(),
+            partial.replace(`@${selectedNamespace}`, patternPath)
+          );
 
-    return partial;
+          try {
+            // Check to see if the file actually exists.
+            if (fs.existsSync(tempPartial)) {
+              // get the path to the top-level folder of this pattern
+              // ex. /Users/bradfrost/sites/pattern-lab/packages/edition-twig/source/_patterns/atoms
+              const fullFolderPath = `${
+                tempPartial.split(namespacePaths[index])[0]
+              }${namespacePaths[index]}`;
+
+              // then tease out the folder name itself (including the # prefix)
+              // ex. atoms
+              const folderName = fullFolderPath.substring(
+                fullFolderPath.lastIndexOf('/') + 1,
+                fullFolderPath.length
+              );
+
+              // finally, return the Twig path we created from the full file path
+              // ex. atoms/buttons/button.twig
+              const fullIncludePath = tempPartial.replace(
+                tempPartial.split(
+                  `${folderName}${tempPartial.split(folderName)[1]}`
+                )[0],
+                ''
+              );
+
+              namespaceResolvedPartial = fullIncludePath;
+
+              // After it matches one time, set the resolved partial and exit the loop.
+              break;
+            }
+          } catch (err) {
+            console.error(err);
+          }
+        }
+      }
+      // Return the path with the namespace resolved OR the regex'd partial.
+      return namespaceResolvedPartial || partial;
+    } catch (err) {
+      console.error(
+        'Error occurred when trying to find partial name in: ' + partialString
+      );
+      return null;
+    }
   },
 
   spawnFile: function (config, fileName) {
@@ -209,31 +288,32 @@ var engine_twig = {
    * @param {object} config - the global config object from core
    */
   usePatternLabConfig: function (config) {
+    patternLabConfig = config;
     metaPath = path.resolve(config.paths.source.meta);
     // Global paths
     fileSystemLoader.addPath(config.paths.source.meta);
     fileSystemLoader.addPath(config.paths.source.patterns);
     // Namespaced paths
     if (
-      config['engines'] &&
-      config['engines']['twig'] &&
-      config['engines']['twig']['namespaces']
+      config.engines &&
+      config.engines.twig &&
+      config.engines.twig.namespaces
     ) {
-      var namespaces = config['engines']['twig']['namespaces'];
+      const namespaces = config.engines.twig.namespaces;
       Object.keys(namespaces).forEach(function (key, index) {
         fileSystemLoader.addPath(namespaces[key], key);
       });
     }
 
     // add twing extensions
     if (
-      config['engines'] &&
-      config['engines']['twig'] &&
-      config['engines']['twig']['loadExtensionsFile']
+      config.engines &&
+      config.engines.twig &&
+      config.engines.twig.loadExtensionsFile
     ) {
       const extensionsFile = path.resolve(
         './',
-        config['engines']['twig']['loadExtensionsFile']
+        config.engines.twig.loadExtensionsFile
       );
       if (fs.pathExistsSync(extensionsFile)) {
         try {

packages/uikit-workshop/build/webpack-server.js

@@ -120,10 +120,8 @@ async function serve(patternlab, configPath, buildDir = 'public') {
 
       app.use(
         webpackDevMiddleware(compiler, {
-          quiet: true,
           stats: 'errors-warnings',
           writeToDisk: true,
-          logLevel: 'error',
         })
       );
 

packages/uikit-workshop/package.json

@@ -7,8 +7,8 @@
     "start": "node ./build-tools.js",
     "prepublish": "npm run build",
     "postbootstrap": "npm run build",
-    "build": "webpack-cli --config webpack.config.js --progress --bail --display=minimal",
-    "watch": "webpack-cli --config webpack.config.js --progress --watch --display=minimal",
+    "build": "webpack-cli --config webpack.config.js --progress --bail --stats=minimal",
+    "watch": "webpack-cli --config webpack.config.js --progress --watch --stats=minimal",
     "test": "npm run build"
   },
   "authors": [
@@ -48,32 +48,32 @@
     "@pattern-lab/uikit-polyfills": "^5.16.1",
     "@reach/visually-hidden": "^0.1.2",
     "@webcomponents/custom-elements": "^1.4.3",
-    "autoprefixer": "^9.6.5",
-    "babel-loader": "^8.0.6",
+    "autoprefixer": "^10.2.5",
+    "babel-loader": "^9.1.2",
     "better-opn": "^3.0.0",
     "browser-sync": "^2.26.7",
     "classnames": "^2.3.1",
-    "clean-css-loader": "^1.0.1",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-css-loader": "^4.2.1",
+    "clean-webpack-plugin": "4.0.0",
     "clipboard": "^2.0.8",
-    "copy-webpack-plugin": "^5.0.2",
+    "copy-webpack-plugin": "^11.0.0",
     "cosmiconfig": "^7.0.0",
-    "css-loader": "^3.2.0",
+    "css-loader": "^6.7.3",
     "ejs": "^3.1.6",
     "express": "^4.17.1",
     "fg-loadjs": "^1.1.0",
     "fuse.js": "^6.4.6",
     "handlebars": "^4.7.7",
-    "hard-source-webpack-plugin-patch": "^0.13.3",
     "hasha": "^5.2.2",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.0.0-beta.11",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.2",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "mousetrap": "^1.6.5",
     "portfinder": "^1.0.28",
-    "postcss-loader": "^3.0.0",
+    "postcss": "^8.2.8",
+    "postcss-loader": "^7.0.2",
     "preact-render-to-string": "^5.1.1",
     "preact": "^10.0.5",
     "preload-webpack-plugin": "^3.0.0-beta.3",
@@ -86,21 +86,21 @@
     "redux": "4.1.2",
     "redux-thunk": "^2.4.0",
     "sass": "1.43.4",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^13.2.0",
     "scriptjs": "^2.5.9",
     "scroll-js": "3.4.x",
     "skatejs": "^5.2.4",
-    "style-loader": "^1.0.0",
-    "svg-sprite-loader": "^4.1.6",
-    "svg-transform-loader": "^2.0.8",
-    "svgo-loader": "^3.0.0",
-    "ts-loader": "^6.2.1",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-middleware": "^3.7.2",
-    "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2",
-    "webpackbar": "^4.0.0",
+    "style-loader": "^3.3.1",
+    "svg-sprite-loader": "^6.0.11",
+    "svg-transform-loader": "^2.0.13",
+    "svgo-loader": "^4.0.0",
+    "ts-loader": "^9.4.2",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-middleware": "^6.0.1",
+    "webpack-hot-middleware": "^2.25.3",
+    "webpack-merge": "^5.8.0",
+    "webpackbar": "5.0.2",
     "wolfy87-eventemitter": "^5.2.9",
     "yargs": "^17.0.1"
   },

packages/uikit-workshop/src/html/index.html

@@ -8,13 +8,16 @@
       content="initial-scale=1, width=device-width, viewport-fit=cover"
     />
     <meta name="theme-color" content="#ababab" />
+    <!-- webpackIgnore: true -->
     <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
       href="styleguide/images/pattern-lab-logo--on-dark.svg"
     />
+    <!-- webpackIgnore: true -->
     <link
       rel="prefetch"
       as="image"
@@ -28,11 +31,14 @@
     <!-- the template for the modal slider -->
     <!-- prettier-ignore -->
     <script type="text/x-handlebars-template" class="pl-js-panel-template-base">
-      ${require('./partials/base-template.html') }
+      <include src="partials/base-template.html"/>
     </script>
 
+    <!-- webpackIgnore: true -->
     <script src="styleguide/data/patternlab-data.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script src="annotations/annotations.js" defer></script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.modern.js"
       type="module"
@@ -63,6 +69,7 @@
         }
       })();
     </script>
+    <!-- webpackIgnore: true -->
     <script
       src="styleguide/js/patternlab-viewer.js"
       defer

packages/uikit-workshop/src/scripts/components/pl-nav/nav.js

@@ -108,7 +108,7 @@ class Nav extends BaseComponent {
 
   receiveIframeMessage(event) {
     const self = this;
-    const data = iframeMsgDataExtraction(e);
+    const data = iframeMsgDataExtraction(event);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {

packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.js

@@ -149,10 +149,10 @@ class Header extends BaseLitComponent {
    *
    * @param {MessageEvent} e A message received by a target object.
    */
-  receiveIframeMessage(e) {
+  receiveIframeMessage(event) {
     const self = this;
 
-    const data = iframeMsgDataExtraction(e);
+    const data = iframeMsgDataExtraction(event);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {

packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.js

@@ -103,10 +103,10 @@ class ToolsMenu extends BaseLitComponent {
    *
    * @param {MessageEvent} e A message received by a target object.
    */
-  receiveIframeMessage(e) {
+  receiveIframeMessage(event) {
     const self = this;
 
-    const data = iframeMsgDataExtraction(e);
+    const data = iframeMsgDataExtraction(event);
 
     if (data.event !== undefined && data.event === 'patternLab.pageClick') {
       try {