Add a plugin for VSCode to preview a template file side by side with example context.

Similar to markdown or html where you can have side by side the origin and the rendered content. It would be really nice to have this for various template files.

Something like this:

For markdown and html files, it would also be pretty nice, to see the rendered file, not only the source code (maybe toggable)

Steps to reproduce

1. Create a simple Node.js project
2. Install Pinion as a development dependency
3. Install Typescript as a development dependency
4. Use the basic example given in the quick start guide to create a code generator
5. Use the command npx pinion path/to/file.ts to execute the generator created in the previous section

You will get the error below:

Oh no! Something went wrong: Unknown file extension ".ts" for path/to/file.ts

It appears to work fine when I rewrite the generator in JavaScript.

I tried debugging and the error seems to occur in the file below.

https://github.com/featherscloud/pinion/blob/main/packages/pinion/src/utils.ts#L36

Looks like the tsx module is being imported with .ts files but I'm not sure how importing the module is supposed to help.

https://github.com/featherscloud/pinion/blob/main/packages/pinion/src/utils.ts#L33

Apparently, importing a .ts file as in the example below will throw the "Unknown file extension" error. It only works when you use tsx from the command line like so: npx tsx index.ts.

import { dirname, join } from "path";
import { fileURLToPath } from "url";


const __dirname = dirname(fileURLToPath(import.meta.url));

const fileName = join(__dirname, "test.ts");


console.log(fileName);

import(fileName)
  .then((response) => {
    console.log(response);
  })
  .catch((reason) => {
    console.error(reason);
  });

Expected behavior

The generator should be able to create a readme.md file as described in the docs.

Actual behavior

You will get the error below instead.

Oh no! Something went wrong: Unknown file extension ".ts" for path/to/file.ts

System configuration

I've set the package.josn's type field to module and installed Typescript as a development dependency.

Module versions (especially the part that's not working):

@featherscloud/pinion version 0.5.3

NodeJS version:
18.15.0

Operating System:
Pop!_OS

Browser Version:
N/A

React Native Version:
N/A

Module Loader:
ECMAScript module loader

I ran the following code and service was undefined, which caused an error:

toFile(({ lib = 'src', service, files }: Context) => [
  lib,
  'services',
  service,
  files.main,
]),

but it was way too hard to track this down with only this much information about the error in the console:

? What is the dashed name of your service? (e.g. category-libraries) folders
Oh no! Something went wrong: The "paths[3]" argument must be of type string. Received undefined

We need a better message and a stack trace. I couldn't find the cause of the error in the debugger, either.

Steps to reproduce

Oh no! Something went wrong: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'

Expected behavior

Create a readme.md file

Actual behavior

Trying the main example, have received this on windows: Oh no! Something went wrong: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'd:'

System configuration

Tell us about the applicable parts of your setup.

NodeJS version:
v21.6.1

Operating System:
Windows 11

Module Loader:
ESM

prompt for changes in file.

This is what the cli of astro shows when npx astro add ${pkg}:

Really nice experience!
I cannot find it in the source code.
https://github.com/withastro/astro

My use case:
I want to run runGenerators for all nested **/*.tpl.ts files inside a folder.

What do you think about runGenerators(['**/*.tpl.ts'], { cwd: __dirname }) with https://www.npmjs.com/package/fast-glob ?

That way I also can explicitly exclude certain files.

When someone installs the package via: npm install @feathershq/pinion they get the latest version, naturally.

But, the README.md in the master branch is not in sync with the latest version. In the old README.md, generators are placed in generators folder while in newer versions you need to put them inside .pinion folder.

This is misleading for someone following the instructions from GitHub.