just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.14k stars 198 forks source link

Add plugin esbuild #1852

Closed adrien3 closed 1 month ago

adrien3 commented 2 months ago

Hello, I've tried many things but unfortunately, I can't integrate an external plugin (https://github.com/esbuild/community-plugins). My idea is to add https://github.com/luckycatfactory/esbuild-graphql-loader to the plugin so that my gql files are transformed into ts. However, I always get errors in my console.

const plugin: Plugin = {
  name: 'update-external',
  setup(pluginBuild: PluginBuild) {
    pluginBuild.esbuild
      .build({
        plugins: [graphqlLoaderPlugin({ filterRegex: /\.(graphql|gql)$/ })],
      })
      .catch(() => {
        process.exit(1);
      });
  },
};

export default plugin;

However, when building, I have an error that comes up

✘ [ERROR] No loader is configured for ".gql" files: libs/shared/util/preference/src/lib/graphql/tracking-config-query.gql

    libs/shared/util/preference/src/lib/graphql/index.ts:2:32:

Is this an error in the lib or in my implementation? Thanks in advance

arturovt commented 1 month ago

You should be doing this:

import graphqlLoaderPlugin from '@luckycatfactory/esbuild-graphql-loader';

const plugin = graphqlLoaderPlugin({ filterRegex: /\.(graphql|gql)$/ });

export default plugin;

Tried this out personally:

// schema.gql

type Post {
  author: String!
  name: String!
}
// main.ts

// @ts-ignore
import schema from './schema.gql';
console.log(schema);

image