Document progress on `create-nuxt3-app` #3

zoey-kaiser · 2022-10-10T13:47:21Z

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:

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!

The text was updated successfully, but these errors were encountered:

BracketJohn · 2022-10-11T08:11:42Z

Hm, does something like this work:

    import * as url from 'url';
    const __filename = url.fileURLToPath(import.meta.url);
    const __dirname = url.fileURLToPath(new URL('.', import.meta.url));

of course with slightly different paths.

BracketJohn · 2022-10-11T08:29:27Z

I also found a different solyution, checkout: https://v3.nuxtjs.org/guide/going-further/modules#provide-nuxt-plugins

Code:

import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'

export default defineNuxtModule<ModuleOptions>({
  setup (options, nuxt) {
    // Create resolver to resolve relative paths
    const { resolve } = createResolver(import.meta.url)

    addPlugin(resolve('./runtime/plugin'))
  }
})

checkout how createResolver works and you can now how to resolve the relative paths!

another option:

import { resolve } from 'path'

resolve(runtimeDir, 'plugin')

BracketJohn · 2022-10-11T10:42:10Z

lstat: https://linux.die.net/man/2/lstat

zoey-kaiser · 2022-10-11T13:47:26Z

import { resolve } from 'path'

resolve(runtimeDir, 'plugin')

I have been doing some experimentation into how this works. I ran into the following issue. It always takes the current package into account when creating the link. See:

Output:
/Users/zoey/Documents/Development/SideStream/sidebase/create-nuxt3-app/packages/cn3a-plop-files/plopfile.js

Needed:
/Users/zoey/Documents/Development/SideStream/sidebase/packages/cn3a-plop-files/plopfile.js

One option would be to remove /create-nuxt3-app with regex or string replacement, however I think this is super hacky and would not like to do it unless it is the only option.

I checked the documentation for resolve() but sadly did not find any other options I could use to define it better.

https://nodejs.org/api/path.html#pathresolvepaths

zoey-kaiser linked a pull request Oct 21, 2022 that will close this issue

Added v0.1.0 of create-nuxt3-app #2

Open

zoey-kaiser self-assigned this Oct 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Document progress on `create-nuxt3-app` #3

Document progress on `create-nuxt3-app` #3

zoey-kaiser commented Oct 10, 2022 •

edited

Loading

BracketJohn commented Oct 11, 2022

BracketJohn commented Oct 11, 2022 •

edited

Loading

BracketJohn commented Oct 11, 2022

zoey-kaiser commented Oct 11, 2022

Document progress on create-nuxt3-app #3

Document progress on create-nuxt3-app #3

Comments

zoey-kaiser commented Oct 10, 2022 • edited Loading

What we have so far:

Issues

BracketJohn commented Oct 11, 2022

BracketJohn commented Oct 11, 2022 • edited Loading

BracketJohn commented Oct 11, 2022

zoey-kaiser commented Oct 11, 2022

Document progress on `create-nuxt3-app` #3

Document progress on `create-nuxt3-app` #3

zoey-kaiser commented Oct 10, 2022 •

edited

Loading

BracketJohn commented Oct 11, 2022 •

edited

Loading