Skip to content

Commit

Permalink
docs: add references for packages
Browse files Browse the repository at this point in the history
  • Loading branch information
@uhyo
uhyo committed Mar 31, 2024
1 parent af89248 commit bf19ee9
Show file tree
Hide file tree
Showing 4 changed files with 254 additions and 0 deletions.
73 changes: 73 additions & 0 deletions website/src/app/(docs)/references/graphql-loader/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import Link from "next/link";
import { Highlight } from "@/app/_utils/Highlight";
import { Toc } from "../../_toc";
import { Breadcrumb } from "@/app/_utils/Breadcrumb";
import { ogp } from "@/app/_utils/metadata";
import { Hint } from "@/app/_utils/Hint";

export const metadata = ogp({
title: "@nitrogql/graphql-loader reference",
});

export default function GraphQLLoader() {
return (
<Toc>
<main>
<Breadcrumb
parents={[{ label: "References", href: "/references" }]}
current="@nitrogql/graphql-loader reference"
/>
<h2>
<code>@nitrogql/graphql-loader</code> reference
</h2>
<p>
<code>@nitrogql/graphql-loader</code> is a Webpack loader that
processes GraphQL files. This package is suited for projects that use
Webpack or Next.js as a build tool.
</p>
<h3 id="example">Example</h3>
<p>
<b>webpack.config.js</b>
</p>
<Highlight language="ts">{`module.exports = {
module: {
rules: [
{
test: /\.graphql$/,
loader: "@nitrogql/graphql-loader",
options: {
configFile: "./graphql.config.yaml",
},
},
],
},
};`}</Highlight>

<h3 id="options">options</h3>
<p>
Currently, <code>@nitrogql/graphql-loader</code> supports only one
option: <code>configFile</code>.
</p>

<h4 id="configfile">options.configFile</h4>
<p>
Path to the{" "}
<Link href="/configuration/file-name">configuration file</Link>.
Relative paths are resolved relative to{" "}
<a
href="https://webpack.js.org/configuration/entry-context/#context"
target="_blank"
>
Webpack&apos;s context
</a>
.
</p>
<Hint>
🚟 When omitted, no configuration file is loaded, meaning that the
default configuration is used. We recommend always specifying a
configuration file.
</Hint>
</main>
</Toc>
);
}
92 changes: 92 additions & 0 deletions website/src/app/(docs)/references/jest-transform/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
import Link from "next/link";
import { Highlight } from "@/app/_utils/Highlight";
import { Toc } from "../../_toc";
import { Breadcrumb } from "@/app/_utils/Breadcrumb";
import { ogp } from "@/app/_utils/metadata";
import { Hint } from "@/app/_utils/Hint";

export const metadata = ogp({
title: "@nitrogql/jest-transform reference",
});

export default function JestTransform() {
return (
<Toc>
<main>
<Breadcrumb
parents={[{ label: "References", href: "/references" }]}
current="@nitrogql/jest-transform reference"
/>
<h2>
<code>@nitrogql/jest-transform</code> reference
</h2>
<p>
<code>@nitrogql/jest-transform</code> is a Jest transformer that lets
you load <code>.graphql</code> files from your code during testing.
This package is suited for projects that use Jest to test client-side
code that uses GraphQL.
</p>
<h3 id="example">Example</h3>
<p>
<b>jest.config.js</b>
</p>
<Highlight language="ts">{`{
"transform": {
"^.+\\.graphql$": ["@nitrogql/jest-transform", {
"configFile": path.resolve(__dirname, "nitrogql.config.js")
}]
}
}`}</Highlight>

<h3 id="options">options</h3>

<h4 id="configfile">options.configFile</h4>
<p>
Path to the{" "}
<Link href="/configuration/file-name">configuration file</Link>.
</p>

<h4 id="additionalTransformer">options.additionalTransformer</h4>
<p>
Additional transformer to apply to the generated source code. Can be a
string or an array of two elements: the transformer name and the
transformer configuration. See below for more information.
</p>

<h4 id="additionalTransformerFilenameSuffix">
options.additionalTransformerFilenameSuffix
</h4>
<p>
Suffix to add to filename when passing code to the additional
transformer. Defaults to <code>&quot;.js&quot;</code>.
</p>

<h3 id="commonjs-support">CommonJS Support</h3>
<p>
<code>@nitrogql/jest-transform</code> is only capable of transforming
GraphQL files to ES modules. If you need CommonJS support, use the{" "}
<code>additionalTransformer</code> option to apply another transformer
that can convert ES modules to CommonJS.
</p>
<p>
Example setup with <code>ts-jest</code>:
</p>
<Highlight language="js">{`{
"transform": {
"^.+\.tsx?": ["ts-jest", { isolatedModules: true }],
"^.+\\.graphql$": ["@nitrogql/jest-transform", {
"configFile": path.resolve(__dirname, "nitrogql.config.yml"),
// Use the additionalTransformer option to apply ts-jest to the output.
"additionalTransformer": ["ts-jest", { isolatedModules: true }],
// ts-jest expects .ts files, so we need to change the file extension
// by applying the additionalTransformerFilenameSuffix option.
"additionalTransformerFilenameSuffix": ".ts"
}]
},
}`}</Highlight>
</main>
</Toc>
);
}
21 changes: 21 additions & 0 deletions website/src/app/(docs)/references/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,31 @@ export default function References() {
</ul>

<h3>Packages</h3>
<p>
Packages not listed here are considered internal. They are not meant
to be used directly and are subject to change without a major version
bump.
</p>

<ul>
<li>
<Link href="/references/nitrogql-cli">@nitrogql/cli</Link>
</li>
<li>
<Link href="/references/graphql-loader">
@nitrogql/graphql-loader
</Link>
</li>
<li>
<Link href="/references/rollup-plugin">
@nitrogql/rollup-plugin
</Link>
</li>
<li>
<Link href="/references/jest-transform">
@nitrogql/jest-transform
</Link>
</li>
</ul>
<h3>Generated Files</h3>
<p>
Expand Down
68 changes: 68 additions & 0 deletions website/src/app/(docs)/references/rollup-plugin/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import Link from "next/link";
import { Highlight } from "@/app/_utils/Highlight";
import { Toc } from "../../_toc";
import { Breadcrumb } from "@/app/_utils/Breadcrumb";
import { ogp } from "@/app/_utils/metadata";
import { Hint } from "@/app/_utils/Hint";

export const metadata = ogp({
title: "@nitrogql/rollup-plugin reference",
});

export default function RollupPlugin() {
return (
<Toc>
<main>
<Breadcrumb
parents={[{ label: "References", href: "/references" }]}
current="@nitrogql/rollup-plugin reference"
/>
<h2>
<code>@nitrogql/rollup-plugin</code> reference
</h2>
<p>
<code>@nitrogql/rollup-plugin</code> is a Rollup plugin that processes
GraphQL files. This package is suited for projects that use Rollup or
Vite as a build tool.
</p>
<h3 id="example">Example</h3>
<p>
<b>rollup.config.js</b>
</p>
<Highlight language="ts">{`import nitrogql from "@nitrogql/rollup-plugin";
{
plugins: [
nitrogql({
configFile: "./graphql.config.ts",
include: ["**/*.graphql"],
}),
],
};`}</Highlight>

<h3 id="options">options</h3>

<h4 id="configfile">options.configFile</h4>
<p>
Path to the{" "}
<Link href="/configuration/file-name">configuration file</Link>.
Relative paths are resolved relative to the project root in case of
Vite, and relative to the current working directory in case of Rollup.
</p>
<Hint>
🚟 When omitted, no configuration file is loaded, meaning that the
default configuration is used. We recommend always specifying a
configuration file.
</Hint>

<h4 id="include">options.include</h4>
<p>An array of glob patterns that specify the files to process.</p>

<h4 id="exclude">options.exclude</h4>
<p>
An array of glob patterns that specify the files to ignore even if
they match the include patterns.
</p>
</main>
</Toc>
);
}

0 comments on commit bf19ee9

Please sign in to comment.