Skip to content

Commit

Permalink
Merge pull request #22 from wattanx/feat-capi-legacy-convert-script
Browse files Browse the repository at this point in the history
feat: capi legacy convert script
  • Loading branch information
wattanx authored May 27, 2023
2 parents 93cd202 + 383a72d commit cab213d
Show file tree
Hide file tree
Showing 7 changed files with 134 additions and 142 deletions.
37 changes: 29 additions & 8 deletions docs/cli/nuxt-bridge-migration-tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,31 @@ A tool to support migration to Nuxt Bridge.

## Usage

### Migrating from `@nuxtjs/composition-api` to `@nuxt/bridge` capi legacy

convert from `@nuxtjs/composition-api` to the capi legacy of `@nuxt/bridge`.

```bash
npx @wattanx/nuxt-bridge-migration@latest capi-legacy <files...>
```

```diff
const {
- $fetch,
- $fetchState,
+ fetch,
+ fetchState,
} = useFetch(async () => {
...
});
```

[useRoute migration](/cli/nuxt-bridge-migration-tools#useroute-migration)

### Migrating from `@nuxtjs/composition-api`

```bash
npx @wattanx/nuxt-bridge-migration capi-migration <files...>
npx @wattanx/nuxt-bridge-migration@latest capi-migration <files...>
```

Perform the following conversions.
Expand All @@ -27,7 +48,7 @@ Perform the following conversions.
Convert `@nuxtjs/composition-api` for bridge.

```bash
npx @wattanx/nuxt-bridge-migration capi-import <files...>
npx @wattanx/nuxt-bridge-migration@latest capi-import <files...>
```

Path to the target vue file, which can be set with the glob pattern. e.g.: `src/**/*.vue`
Expand All @@ -44,7 +65,7 @@ Path to the target vue file, which can be set with the glob pattern. e.g.: `src/
Convert `useStore` to `useNuxtApp().$store`

```bash
npx @wattanx/nuxt-bridge-migration use-store <files...>
npx @wattanx/nuxt-bridge-migration@latest use-store <files...>
```

```diff
Expand All @@ -57,7 +78,7 @@ npx @wattanx/nuxt-bridge-migration use-store <files...>
Convert `useContext()` to `useNuxtApp()`

```bash
npx @wattanx/nuxt-bridge-migration use-context <files...>
npx @wattanx/nuxt-bridge-migration@latest use-context <files...>
```

```diff
Expand All @@ -70,7 +91,7 @@ npx @wattanx/nuxt-bridge-migration use-context <files...>
Convert `useMeta` to `useHead`.

```bash
npx @wattanx/nuxt-bridge-migration use-meta <files...>
npx @wattanx/nuxt-bridge-migration@latest use-meta <files...>
```

```diff
Expand All @@ -83,7 +104,7 @@ npx @wattanx/nuxt-bridge-migration use-meta <files...>
Removes `value` from the return value of `useRoute`.

```bash
npx @wattanx/nuxt-bridge-migration use-route <files...>
npx @wattanx/nuxt-bridge-migration@latest use-route <files...>
```

```diff
Expand All @@ -97,7 +118,7 @@ const route = useRoute();
Remove `defineNuxtMiddleware`.

```bash
npx @wattanx/nuxt-bridge-migration define-nuxt-middleware <files...>
npx @wattanx/nuxt-bridge-migration@latest define-nuxt-middleware <files...>
```

```diff
Expand All @@ -121,7 +142,7 @@ npx @wattanx/nuxt-bridge-migration define-nuxt-middleware <files...>
Remove `defineNuxtPlugin`.

```bash
npx @wattanx/nuxt-bridge-migration define-nuxt-plugin <files...>
npx @wattanx/nuxt-bridge-migration@latest define-nuxt-plugin <files...>
```

```diff
Expand Down
133 changes: 1 addition & 132 deletions packages/nuxt-bridge-migration-tools/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,135 +2,4 @@

A tool to support migration to Nuxt Bridge.

## Usage

### Migrating from `@nuxtjs/composition-api`

```bash
npx @wattanx/nuxt-bridge-migration capi-migration <files...>
```

Perform the following conversions.

- [`@nuxtjs/composition-api` import migration](/packages/nuxt-bridge-migration-tools/README.md#nuxtjscomposition-api-import-migration)
- [`useStore` migration](/packages/nuxt-bridge-migration-tools/README.md#usestore-migration)
- [`useContext` migration](/packages/nuxt-bridge-migration-tools/README.md#usecontext-migration)
- [`useMeta` migration](/packages/nuxt-bridge-migration-tools/README.md#usemeta-migration)
- [`useRoute` migration](/packages/nuxt-bridge-migration-tools/README.md#useroute-migration)

### `@nuxtjs/composition-api` import migration

Convert `@nuxtjs/composition-api` for bridge.

```bash
npx @wattanx/nuxt-bridge-migration capi-import <files...>
```

Path to the target vue file, which can be set with the glob pattern. e.g.: `src/**/*.vue`

- `@nuxtjs/composition-api` -> `#imports`
- `useContext` -> `useNuxtApp`
- `useStore` -> `useNuxtApp`
- `useMeta` -> `useHead`
- `useAsync` -> `useLazyAsyncData`
- `useFetch` -> `useLazyFetch`

### `useStore` migration

Convert `useStore` to `useNuxtApp().$store`

```bash
npx @wattanx/nuxt-bridge-migration use-store <files...>
```

```diff
- const store = useStore();
+ const { $store: store } = useNuxtApp();
```

### `useContext` migration

Convert `useContext()` to `useNuxtApp()`

```bash
npx @wattanx/nuxt-bridge-migration use-context <files...>
```

```diff
- const { $axios, $sentry } = useContext();
+ const { $axios, $sentry } = useNuxtApp();
```

### `useMeta` migration

Convert `useMeta` to `useHead`.

```bash
npx @wattanx/nuxt-bridge-migration use-meta <files...>
```

```diff
- useMeta({ title: "wattanx-converter" });
+ useHead({ title: "wattanx-converter" });
```

### `useRoute` migration.

Removes `value` from the return value of `useRoute`.

```bash
npx @wattanx/nuxt-bridge-migration use-route <files...>
```

```diff:bash
const route = useRoute();
- const path = route.value.path;
+ const path = route.path;
```

### `defineNuxtMiddleware` migration

Remove `defineNuxtMiddleware`.

```bash
npx @wattanx/nuxt-bridge-migration define-nuxt-middleware <files...>
```

```diff
- import { defineNuxtMiddleware } from "@nuxtjs/composition-api";
- export default defineNuxtMiddleware(({ store, redirect }) => {
- if (!store.state.authenticated) {
- return redirect('/login')
- }
- });

+ import type { Middleware } from '@nuxt/types';
+ export default <Middleware> function({ store, redirect }) {
+ if (!store.state.authenticated) {
+ return redirect('/login')
+ }
+ };
```

### `defineNuxtPlugin` migration

Remove `defineNuxtPlugin`.

```bash
npx @wattanx/nuxt-bridge-migration define-nuxt-plugin <files...>
```

```diff
- import { defineNuxtPlugin } from '@nuxtjs/composition-api';
- export default defineNuxtPlugin((ctx, inject) => {
- inject('hello', (msg) => console.log('Hello World'));
- });

+ import type { Plugin } from '@nuxt/types';
+ export default <Plugin> function(ctx, inject) {
+ inject('hello', (msg) => console.log('Hello World'));
+ };
```

> ⚠️ New format for nuxt 3 is not supported.
> https://nuxt.com/docs/bridge/overview#new-plugins-format-optional
[Docs](https://wattanx-converter.vercel.app/cli/nuxt-bridge-migration-tools.html)
2 changes: 1 addition & 1 deletion packages/nuxt-bridge-migration-tools/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@wattanx/nuxt-bridge-migration",
"version": "0.0.10",
"version": "0.0.13",
"description": "A tool to support migration to Nuxt Bridge.",
"main": "dist/index.js",
"bin": {
Expand Down
29 changes: 29 additions & 0 deletions packages/nuxt-bridge-migration-tools/src/commands/capi-legacy.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import type { Arguments, Argv } from "yargs";
import capiLegacy from "../transformations/capi-legacy";
import { convertTargetFiles } from "../lib/convert-target-files";
import { executeTransform } from "../handlers/execute-transform";

type Options = {
targetFilePaths: string[];
};

export const command = "capi-legacy [targetFilePaths...]";
export const desc =
"convert from `@nuxtjs/composition-api` to the capi legacy of `@nuxt/bridge`.";

export const builder = (yargs: Argv<Options>): Argv<Options> =>
yargs.positional("targetFilePaths", {
array: true,
type: "string",
demandOption: true,
description:
"Path to the target vue file, which can be set with the glob pattern. eg: 'src/**/*.vue'",
} as const);

export const handler = async (argv: Arguments<Options>): Promise<void> => {
const { targetFilePaths } = argv;

const targetFiles = await convertTargetFiles(targetFilePaths);

executeTransform(targetFiles, capiLegacy);
};
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ export const convertTargetFiles = async (targetFilePaths: string[]) => {
const extension = (/\.([^.]*)$/.exec(path) || [])[0];

const script =
extension === ".vue" ? descriptor.script?.content ?? "" : fullText;
extension === ".vue"
? descriptor.scriptSetup?.content ?? descriptor.script?.content ?? ""
: fullText;
const lang = descriptor.script?.lang ?? extension === ".ts" ? "ts" : "js";

return {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { applyTransform } from "jscodeshift/src/testUtils";
import transform from "./capi-legacy";

test("capi migration", () => {
const source = `import { defineComponent, useRoute, usefetch } from '@nuxtjs/composition-api';
export default defineComponent({
setup() {
const { $fetch, $fetchState } = useFetch(async () => {
$fetch('https://pokeapi.co/api/v2/pokemon/ditto');
})
const route = useRoute();
const path = route.value.path;
}
});
`;

const expected = `import { defineComponent, useRoute, usefetch } from '@nuxtjs/composition-api';
export default defineComponent({
setup() {
const {
fetch,
fetchState,
} = useFetch(async () => {
$fetch('https://pokeapi.co/api/v2/pokemon/ditto');
})
const route = useRoute();
const path = route.path;
}
});`;

const result = applyTransform(transform, null, {
source,
});
expect(result).toBe(expected);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import type { Identifier, Property } from "jscodeshift";
import { convertUseRoute } from "./use-route";
import { wrap, ASTTransformation } from "../wrapAstTransformation";

export const convertCapiLegacy: ASTTransformation<any> = (context, options) => {
const { root, j } = context;

const useFetchDeclarator = root.find(j.VariableDeclarator, {
init: {
callee: {
name: "useFetch",
},
},
});

useFetchDeclarator.find(j.ObjectPattern).forEach((x) => {
const properties = x.node.properties as Property[];
properties.forEach((p) => {
const key = p.key as Identifier;
if (key.name === "$fetch") {
key.name = "fetch";
}
if (key.name === "$fetchState") {
key.name = "fetchState";
}
});
j(x).replaceWith(j.objectPattern(properties));
});

convertUseRoute(context, options);
};

export default wrap(convertCapiLegacy);
export const parser = "ts";

1 comment on commit cab213d

@vercel
Copy link

@vercel vercel bot commented on cab213d May 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

wattanx-converter – ./

wattanx-converter-git-main-wattanx.vercel.app
wattanx-converter-wattanx.vercel.app
wattanx-converter.vercel.app

Please sign in to comment.