kreuzerk / svg-to-ts

Build performant SVG icon libraries by converting raw SVG files to TypeScript that is optimized for modern tree shaking mechanisms.
MIT License
272 stars 44 forks source link

Add support for verbatimModuleSyntax #242

Open JoA-MoS opened 7 months ago

JoA-MoS commented 7 months ago

When using verbatim module syntax flag and the included configuration builds will fail because the model import does not have the type keyword.

libs/common-ui/icons-feather/src/icons/index.ts:3:10 - error TS1484: 'FthrIcon' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

  1 | /* 🤖 this file was generated by svg-to-ts */
  2 | 
> 3 | import { FthrIcon } from './build/fthr-icons.model';
    |          ^
  4 | 
  5 | export type FthrIconNameSubset<T extends Readonly<FthrIcon[]>> = T[number]['name'];
  6 | 

.svg-to-tsrc

{
    "delimiter": "KEBAB",
    "generateType": true,
    "interfaceName": "FthrIcon",
    "modelFileName": "fthr-icons.model",
    "namePrefix": "fthr-",
    "optimizeForLazyLoading": true,
    "outputDirectory": "./src/icons",
    "prefix": "fthr",
    "srcFiles": [
        "../../../node_modules/feather-icons/dist/icons/**/*.svg"
    ],
    "typeName": "FthrIcons",
    "svgoConfig": {
        "plugins": [
            {
                "name": "preset-default",
                "params": {
                    "overrides": {
                        "removeViewBox": false
                    }
                }
            }
        ]
    }
}

I am Willing to contribute with a little guidance.

JoA-MoS commented 7 months ago

Ahh... I think I found the issue. The prettier version needs to be updated it is called in the formatContent function

JoA-MoS commented 7 months ago

Here is what I would recommend for a fix

const formatContent = async (fileContent: string, filePath: string) => {
  // get the existing prettier config if it exists
  const prettierConfig = await prettier.resolveConfig(filePath);
  // use the existing prettier config along with the defaults to format the file content
  return await prettier.format(fileContent, { singleQuote: true, ...prettierConfig, parser: 'typescript' });
};

and adjust the write file method to pass the output file as well as await the formatContent function since it is now async.

This has the benefit of using the user's existing prettier config if they have one while still having the defaults if they don't.

This change would require a prettier write across the entire codebase as there have been some changes so it might result in a lot of files touched.

@kreuzerk - let me know if you want a PR as I have made the required changes locally to test.

JoA-MoS commented 7 months ago

@kreuzerk & @felipeplets - I have made the required changes in PR #243. Because this requires a newer version of prettier it did require running prettier --write

The updated prettier version has a different API and no longer uses the parser plugin so that has been removed. I also added support to the tool to grab the existing project's prettier config if it exists if it doesn't exist then we will use the default.

I classified this as a breaking change because it implies a minimum version of typescript of 3.8 which I didn't see documented previously.

kreuzerk commented 7 months ago

Hey @JoA-MoS thx a lot for the PR and the Issue here, I will take a look at this. 👍