Add Preliminary Support For Javascript-based Configs #1000

sghoweri · 2019-03-31T12:51:34Z

Closes #999

WIP - adding preliminary support for dynamic JS-based configs.

Todos

Wire up cosmic config to allow support for .js and .json based configs with minimal overhead
Update existing tests to pass with updated config
Troubleshoot config getting overwritten with JSON-like output (have to revert every time atm
Finish updating docs / code comments

CC @EvanLovely

EvanLovely

Let's see if we can get backwards compatibility with the .json format in addition to the new .js format.

packages/core/patternlab-config.js

EvanLovely · 2019-04-06T22:19:01Z

packages/core/src/lib/patternlab.js

@@ -36,8 +36,7 @@ module.exports = class PatternLab {
  constructor(config) {
    // Either use the config we were passed, or load one up from the config file ourselves
    this.config =
-      config ||
-      fs.readJSONSync(path.resolve(__dirname, '../../patternlab-config.json'));
+      config || require(path.resolve(__dirname, '../../patternlab-config.js'));


Couldn't we just do this instead and then either .json or .js (or even patternlab-config/index.js) would work? Backwards compatible so previous installs do not error if they have .json and might even help with some of the other problems you've mentioned.

- require(path.resolve(__dirname, '../../patternlab-config.js')) + require(path.resolve(__dirname, '../../patternlab-config'))

EvanLovely · 2019-04-06T22:20:00Z

packages/edition-twig/patternlab-config.default.js

+          '../uikit-workshop/views/partials/patternSection.mustache',
+        patternSectionSubtype:
+          '../uikit-workshop/views/partials/patternSectionSubtype.mustache',
+        viewall: '../uikit-workshop/views/viewall.mustache',


Wouldn't we need require.resolve() on all these uikit-workshop paths too?

EvanLovely · 2019-04-06T22:20:24Z

packages/edition-twig/patternlab-config.js

+          '../uikit-workshop/views/partials/patternSection.mustache',
+        patternSectionSubtype:
+          '../uikit-workshop/views/partials/patternSectionSubtype.mustache',
+        viewall: '../uikit-workshop/views/viewall.mustache',


Moar require.resolve() spots

EvanLovely · 2019-04-06T23:44:04Z

OK, so it looks like plugins have the ability to "enable" and "disable" themselves by firing off a cli command that alters the patternlab-config.json for you:

enable.js:

patternlab-node/packages/cli/bin/cli-actions/enable.js

Lines 33 to 34 in 4556fc7

    
           yield writeJsonAsync(options.parent.config, config); 
        
           spinner.succeed(`⊙ patternlab → Updated config`);

There's one in disable.js too:

patternlab-node/packages/cli/bin/cli-actions/disable.js

Lines 35 to 36 in 4556fc7

    
           yield writeJsonAsync(options.parent.config, config); 
        
           spinner.succeed(`⊙ patternlab → Updated config`);

And another one in install.js as well:

patternlab-node/packages/cli/bin/cli-actions/install.js

Lines 61 to 62 in 4556fc7

    
           yield writeJsonAsync(options.parent.config, config); 
        
           spinner.succeed(`⊙ patternlab → Updated config`);

So since options.parent.config at this point is what we passed in via command line flag: patternlab-config.js, this writes a string of JSON to that file....

This is the ultimate low-level function that gets called that overwrites our file:

patternlab-node/packages/cli/bin/utils.js

Lines 184 to 187 in 992ebce

    
           const writeJsonAsync = (filePath, data) => 
        
             wrapAsync(function*() { 
        
               yield fs.outputJSON(filePath, data, { spaces: 2 }); 
        
             });

EvanLovely · 2019-04-07T00:03:57Z

Well, crap 💩 this will be a tough refactor with those in there. Perhaps keeping it json and then passing the string paths we get from it through resolvePkg might work? This function caught my eye:

patternlab-node/packages/cli/bin/replace-config.js

Lines 5 to 15 in 4556fc7

    
           /** 
        
            * @func replaceConfigPaths 
        
            * @desc Immutable replace source and public paths in the passed config. 
        
            * @param {config} config - The passed Pattern Lab config. 
        
            * @param {string} projectDir - The project directory path, defaults to ./ 
        
            * @param {string} sourceDir - The source root directory path. 
        
            * @param {string} publicDir - The public root directory path. 
        
            * @param {string} exportDir - The export root directory path. 
        
            * @return {config} - Returns a modified config. Original stays unaltered. 
        
            */ 
        
           function replaceConfigPaths(

Or perhaps we can replace this:

      "patternlabFiles": {
        "general-header": "../uikit-workshop/views/partials/general-header.mustache",
        "general-footer": "../uikit-workshop/views/partials/general-footer.mustache",
        "patternSection": "../uikit-workshop/views/partials/patternSection.mustache",
        "patternSectionSubtype": "../uikit-workshop/views/partials/patternSectionSubtype.mustache",
        "viewall": "../uikit-workshop/views/viewall.mustache"
      },

with this:

      "patternlabFiles": {
        "general-header": "./node_modules/@pattern-lab/uikit-workshop/views/partials/general-header.mustache",
        "general-footer": "./node_modules/@pattern-lab/uikit-workshop/views/partials/general-footer.mustache",
        "patternSection": "./node_modules/@pattern-lab/uikit-workshop/views/partials/patternSection.mustache",
        "patternSectionSubtype": "./node_modules/@pattern-lab/uikit-workshop/views/partials/patternSectionSubtype.mustache",
        "viewall": "./node_modules/@pattern-lab/uikit-workshop/views/viewall.mustache"
      },

I tried that, but then I just now got this weird error and I'm not able to pursue further at the moment:

Pattern Lab Node v3.0.1-alpha.0
Pattern Engine mustache: good to go
Pattern Engine twig-php: good to go
Error: ENOENT: no such file or directory, open '/Users/Evan/dev/pl/pl--node/patternlab-node/packages/edition-twig/node_modules/@pattern-lab/uikit-workshop/node_modules/@pattern-lab/uikit-workshop/views/partials/general-header.mustache'

ERROR: missing an essential file from /Users/Evan/dev/pl/pl--node/patternlab-node/packages/edition-twig/node_modules/@pattern-lab/uikit-workshop[object Object]. Pattern Lab won't work without this file.

Incremental builds enabled.
⊙ patternlab → build: Yay, your Pattern Lab project was successfully built ☺

EvanLovely · 2019-04-07T00:11:15Z

OMG! The UI kits resolve those paths already relative to where they are! All this time I thought that ../uikit-workshop was going up and out of the the edition-twig directory and into the uikit-workshop directory but it WASN'T! It was going up and out of the uikit-workshop directory and then right back into that same directory!!!! 😆

This change fixes it!!

      "patternlabFiles": {
        "general-header": "views/partials/general-header.mustache",
        "general-footer": "views/partials/general-footer.mustache",
        "patternSection": "views/partials/patternSection.mustache",
        "patternSectionSubtype": "views/partials/patternSectionSubtype.mustache",
        "viewall": "views/viewall.mustache"
      },

PR up at #1003

# Conflicts: # packages/edition-twig/package.json # packages/edition-twig/patternlab-config.json

cybtachyon · 2019-04-14T21:58:37Z

Did we already link in the doc/spec updates PR for this or do I need to go make one to https://github.com/pattern-lab/the-spec/ to update the spec & docs?

sghoweri · 2019-04-16T21:50:16Z

Did we already link in the doc/spec updates PR for this or do I need to go make one to https://github.com/pattern-lab/the-spec/ to update the spec & docs?

@cybtachyon Spec? What spec? (Seriously, all I see is rough outline that hasn’t gotten updated in a long time).

IMHO, what we REALLY need is a schema that lives in the same repo as the rest of PL’s code (not a separate repo that’s guaranteed to go out of date). That’s the sort of thing that can get tested against, have documentation generated from it, and can get enforced.

bradfrost · 2019-06-02T01:06:01Z

what we REALLY need is a schema that lives in the same repo as the rest of PL’s code (not a separate repo that’s guaranteed to go out of date). That’s the sort of thing that can get tested against, have documentation generated from it, and can get enforced.

@sghoweri would love to talk more about what's required to make that happen!

stale · 2019-08-01T01:11:06Z

It's hard to keep track of everything. This issue has been automatically marked as stale because it has not had recent activity, neither from the team nor the community. It will be closed if no further activity occurs. Please consider adding additional info, volunteering to contribute a fix for this issue, or making a further case that this is important to you, the team, and the project as a whole. Thanks!

bmuenzenmeyer · 2019-08-23T19:17:03Z

packages/core/patternlab-config.js

+
+module.exports = {
+  engines: {
+    twig: {


twig engine should not be in core?

bmuenzenmeyer

I am excited for this !

think it'd be a good time to change to .patternlabrc.js? it's the shortest and aligns with recommended config defaults for eslint => .eslintrc.js

is .patternlabrc.js used by the uikit right now?

sghoweri · 2019-08-23T20:11:32Z

is .patternlabrc.js used by the uikit right now?

@bmuenzenmeyer It is!

bmuenzenmeyer · 2020-02-09T20:54:48Z

@sghoweri I am likely going to use this heavily as a reference but pivot to a new approach. are you alright with that?

sghoweri · 2020-02-09T21:35:24Z

👍🏼

JosefBredereck · 2023-02-12T17:28:55Z

Closing this for now, trying to implement it in a second approach.

feat: add preliminary support for .js configs

e993ddc

EvanLovely requested changes Apr 6, 2019

View reviewed changes

EvanLovely mentioned this pull request Apr 6, 2019

CI test for feat: add preliminary support for .js configs #1002

Closed

EvanLovely mentioned this pull request Apr 7, 2019

fix(edition-twig): correct uikit paths in config #1003

Merged

sghoweri added 3 commits April 11, 2019 13:36

Merge branch 'dev' into feature/js-config-support

94e42c2

# Conflicts: # packages/edition-twig/package.json # packages/edition-twig/patternlab-config.json

fix: update eslint config to allow async functions, etc

f1b6f2a

refactor: auto-resolve config paths + support .js and .json formats

9959b98

cybtachyon mentioned this pull request Apr 16, 2019

Replace/deprecate the outdated spec repo with an in-repo schema #1009

Closed

cybtachyon mentioned this pull request Jun 14, 2019

Add .js Pattern Lab Config Support #999

Open

bmuenzenmeyer mentioned this pull request Jul 16, 2019

Blueprint for Pattern Lab’s Internal Plumbing? #1031

Open

stale bot added the needs response 🤙 label Aug 1, 2019

bmuenzenmeyer added the pinned 📌 Don't let stalebot clean this up label Aug 23, 2019

stale bot removed the needs response 🤙 label Aug 23, 2019

bmuenzenmeyer reviewed Aug 23, 2019

View reviewed changes

packages/core/patternlab-config.js

module.exports = {

engines: {

twig: {

Copy link

Member

bmuenzenmeyer Aug 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

twig engine should not be in core?

bmuenzenmeyer reviewed Aug 23, 2019

View reviewed changes

Merge branch 'dev' into pr/1000

2772373

JosefBredereck closed this Feb 12, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Preliminary Support For Javascript-based Configs #1000

Add Preliminary Support For Javascript-based Configs #1000

sghoweri commented Mar 31, 2019 •

edited

Loading

EvanLovely left a comment

EvanLovely Apr 6, 2019

EvanLovely Apr 6, 2019

ringods Aug 19, 2020

EvanLovely Apr 6, 2019

ringods Aug 19, 2020

EvanLovely commented Apr 6, 2019 •

edited

Loading

EvanLovely commented Apr 7, 2019

EvanLovely commented Apr 7, 2019

cybtachyon commented Apr 14, 2019

sghoweri commented Apr 16, 2019 •

edited

Loading

bradfrost commented Jun 2, 2019

stale bot commented Aug 1, 2019

bmuenzenmeyer Aug 23, 2019

bmuenzenmeyer left a comment

sghoweri commented Aug 23, 2019

bmuenzenmeyer commented Feb 9, 2020

sghoweri commented Feb 9, 2020

JosefBredereck commented Feb 12, 2023

Add Preliminary Support For Javascript-based Configs #1000

Add Preliminary Support For Javascript-based Configs #1000

Conversation

sghoweri commented Mar 31, 2019 • edited Loading

Todos

EvanLovely left a comment

Choose a reason for hiding this comment

EvanLovely Apr 6, 2019

Choose a reason for hiding this comment

EvanLovely Apr 6, 2019

Choose a reason for hiding this comment

ringods Aug 19, 2020

Choose a reason for hiding this comment

EvanLovely Apr 6, 2019

Choose a reason for hiding this comment

ringods Aug 19, 2020

Choose a reason for hiding this comment

EvanLovely commented Apr 6, 2019 • edited Loading

EvanLovely commented Apr 7, 2019

EvanLovely commented Apr 7, 2019

cybtachyon commented Apr 14, 2019

sghoweri commented Apr 16, 2019 • edited Loading

bradfrost commented Jun 2, 2019

stale bot commented Aug 1, 2019

bmuenzenmeyer Aug 23, 2019

Choose a reason for hiding this comment

bmuenzenmeyer left a comment

Choose a reason for hiding this comment

sghoweri commented Aug 23, 2019

bmuenzenmeyer commented Feb 9, 2020

sghoweri commented Feb 9, 2020

JosefBredereck commented Feb 12, 2023

sghoweri commented Mar 31, 2019 •

edited

Loading

EvanLovely commented Apr 6, 2019 •

edited

Loading

sghoweri commented Apr 16, 2019 •

edited

Loading