As we are nearing the first version of create-nuxt3-app, I decided to track my progress and any issues I have with the project in this issue.

What we have so far:

In order to release a first version I created two seperate npm packages. The first is the cn3a-plop-files package, which contains our templating files instructions on how to build the project. The second package is called create-nuxt3-app which is our main package. This package acts as a wrapper around the plop files.

My main reasons for doing this was:

• By default you cannot easily customize the plop cli, leaving us little room for:
  • personal branding
  • new features we might need to develop ourselves
• using the normal plop we cannot simply execute a node script, but would have to include the plop package and run the cli through it
• If we want to use typescript in our project we would have to use a more advanced configuration in order to ignore the building of our template files, which are also written in typescript

This separation leads me into the next segment, the outstanding issue I am facing:

Issues

• In the index.ts file of the create-nuxt3-app I need to reference the plopfile. In order to do this I need to import the location of the plopfile on the host computer. I found the following solution using require.resolve:

const cnaTemplateDir = join(dirname(require.resolve('cn3a-plop-files/package.json')))
const plopFile = join(cnaTemplateDir, 'plopfile.js')

The only issue with this is that it does not work in esm modules and only in commonjs. create-nuxt3-app needs to use esm, as the package node-plop, which is integral to integrating the plop functionality needs to run in esm.

My question would be: How can I get the file location of a specific javascript file inside a esm project. I found two solutions, but have not had any success with implementing them:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import.meta
• https://nodejs.org/api/modules.html#modules_module_createrequire_filename

Maybe @BracketJohn, you have some experience or could give me some points on what is:

• Better and easier to use
• Is supported by a large amount of machines

The second issue I run into has to do with the custom actions I have added to the plop system. Actions let you write custom code that can be executed and used inside of the templating files. I wanted to create a simple action that copied over files from one location to another. The reason for this is that the default add and addmany actions also parse the files for handlebar syntax to inject custom variables (which we will sometimes but not always need). This leads me to my problem. I created the following custom action:

plop.setActionType("copy", (answers, config, plop) => {
  const srcDir = plop.renderString(config.src, answers)
  const destDir = plop.renderString(config.dest, answers)
  fs.copySync(srcDir, destDir, { overwrite: false })
})

It takes a src directory and a destination directory and paste the files from the source to the destination. When I test the script inside the cn3a-plop-files package this works without any issues. However when I try and use the action using the wrapper package (create-nuxt3-app), it says that the directory I attempt to copy is not missing:

  Error: ENOENT: no such file or directory, lstat 'plop-templates/sidebase-main/'
      at Object.lstatSync (node:fs:1566:3)
      at Object.lstatSync (/sidebase/create-nuxt3-app/node_modules/graceful-fs/polyfills.js:318:34)
      at statFunc (/sidebase/create-nuxt3-app/packages/cn3a-plop-files/node_modules/fs-extra/lib/util/stat.js:24:20)
      at getStatsSync (/sidebase/create-nuxt3-app/packages/cn3a-plop-files/node_modules/fs-extra/lib/util/stat.js:25:19)
      at Object.checkPathsSync (/sidebase/create-nuxt3-app/packages/cn3a-plop-files/node_modules/fs-extra/lib/util/stat.js:67:33)
      at Object.copySync (/sidebase/create-nuxt3-app/packages/cn3a-plop-files/node_modules/fs-extra/lib/copy/copy-sync.js:27:38)
      at /sidebase/create-nuxt3-app/packages/cn3a-plop-files/plopfile.js:11:8
      at executeActionLogic (file:////sidebase/create-nuxt3-app/node_modules/node-plop/src/generator-runner.js:166:34)
      at Object.runGeneratorActions (file:////sidebase/create-nuxt3-app/node_modules/node-plop/src/generator-runner.js:114:36)
      at Object.runActions (file:////sidebase/create-nuxt3-app/node_modules/node-plop/src/node-plop.js:247:18) {
    errno: -2,
    syscall: 'lstat',
    code: 'ENOENT',
    path: 'plop-templates/sidebase-main/'
  },

• Is this because it is attempting to copy from a different root then before, leading to the template file not existing?
• When importing a package and then having a copy/paste action in said package, where does it copy relative from? Do I need to include the full path in the copy action? If so, what is the best way to do this?

I apologize in advance for these two question. I have been working the entire day trying to find solutions, without any success. Maybe you can help unblock me! Thank you!