Giter VIP home page Giter VIP logo

penpot-export's Issues

Fix ES modules interoperability in penpot-export

Description

Currently, a node.js project that declares "type": "module" in the package.json can't use penpot-export with a configuration file.

$ penpot-export
/Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js:16
var config = require(configFilePath);
             ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/redradix/Taller/kaleidos-easyfest/easyfest/frontend/penpot-export.config.js from /Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js not supported.
penpot-export.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename penpot-export.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/redradix/Taller/kaleidos-easyfest/easyfest/frontend/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.<anonymous> (/Users/redradix/Taller/kaleidos-easyfest/penpot-export/packages/cli/dist/bin/index.js:16:14) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.16.1

This is due to node.js require() interpreting that the .js file is an ES module, even though it's not.

Renaming the configuration file with the .cjs extension won't work, because penpot-export is limited to the exact name of that config. Also, actually writing an ES module in penpot-export.config.js won't work either; it's an issue with the loader.

Workaround

There's a workaround for UNIX systems: 

$ mv penpot-export.config.js penpot-export.config.cjs
$ ln -s penpot-export.config.cjs penpot-export.config.js

Expected outcome

penpot-export is able to read configuration files written as CommonJS in a ES modules project, or written as ES module in a CommonJS project.

Opportunity

Consider implementing a more flexible configuration system with cosmicconfig (used by Prettier): https://github.com/cosmiconfig/cosmiconfig

This could be an opportunity to implement a CLI option to load configuration files other that penpot-export.config.js.

Consider improving penpot-export CLI

Description

penpot-export has a single CLI command with no options, penpot-export.

It always requires a user configuration file to work.

Expected output

Consider adding a parameter to provide an alternative user configuration file. E.g. penpot-export -c ../my-other-project/penpot-export.config

Consider improving the user experience by providing a way to execute simple cases with only commands and no configuration file. E.g. penpot-export -h https://my-instance.penpot/ -t $AUTH_TOKEN typographies -f $PENPOT_FILE_UUID -o src/styles/typographies.css

Resources

commander, for usual CLI command options: https://www.npmjs.com/package/commander (autogenerates help commands!)

inquirer, for an interactive CLI program (a configuration generator?): https://www.npmjs.com/package/inquirer 

Decouple core from side-effects

Description

@penpot-export/core currently logs to the console and write files, without any way to control that behaviour for the consumer.

This may be undesired for some use-cases. E.g. someone that wants to hook into the file before it's written to use PostCSS or CSSTree or apply any transformation.

Expected output

Move logging to the CLI. This could be made injecting a logger function. But I'll just prefer to use a generator function in core and use message passing with the CLI, then let the CLI log the way it wants.

Return file contents instead of writing files directly. Expose a function to write files, if the logic happens to be non-trivial. When written as a generator function, each file will be another message yielded. The file path configuration won't be required.

Opportunity

Using a generator function will allow the core transformation to be treated as a thread, and a consumer (like the CLI) will gain great abilities like pause and resume execution at will. This may be used to make the generation interactive or quiet, or expose some user hooks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.