Release v0.2.0 to NPM
#413
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat(docs): update installation for nuxt 3
- Installs `rollup-plugin-esbuild` that adds TypeScript support to
Rollup. This package supersedes `@rollup/plugin-typescript`.
Replaces `rollup-plugin-vue` with `@vitejs/plugin-vue` because it is
no longer maintained. `@vitejs/plugin-vue` supersedes it.
There were some possible combinations of plugins for TypeScript and
Vue, though, my preliminary experiments showed that the combination of
`rollup-plugin-esbuild` and `@vitejs/plugin-vue` looks promising.
Installs a couple of additional packages:
- `vue-tsc`: to facilitate type check
- `@vue/tsconfig`: to bootstrap TypeScript config
- Introduces a new script `type-check` that runs `vue-tsc` to perform
type check without emitting results.
- Removes `src/types` folder because we will rewrite all the components in TypeScript and type declarations will be generated automatically.
Configures `rollup.config.mjs` so that Rollup can process TypeScript in both .ts and .vue files. Replaces `babel` with `esbuild` that has built-in support for TypeScript. `tsconfig.json` is a basic configuration for TypeScript. It has `allowJs` option `true` since we have bunch of JavaScript files, though, this option shall be removed when we finish migration to TypeScript. No type declaration files (.d.ts) are generated for now. We have to do it in another script. Renames `src/index.js` to `src/index.ts`, because TypeScript requires at least one `ts` file included in the source files.
- `src/index.ts` imports `App` type from `vue`. It reduces one error by the `type-check` script.
- Installs and configures `vitest`. Only `*.spec.ts` files are evaluated.
`type-check` script uses a new TypeScript config `tsconfig.test.json` that includes `*.spec.*` files. `tsconfig.json` adds `*.spec.*` to `exclude` option to exclude `*.spec.ts` files.
Adds a new script `build:dts` that generates and rolls up type declarations. The rolled up type declaration is emitted to a new place `dist/buefy.d.ts`. `build` script also runs `build:dts`. Uses `@microsoft/api-extractor` (`api-extractor`) to roll up type declarations. `api-extractor.json` is the configuration file for `api-extractor`. Introduces a new TypeScript config `tsconfig.types.json` that enables options for generating type declarations while disabling transpilation.
- Configures ESLint to run on TypeScript (*.ts) files.
Installs the following packages necessary for TypeScript processing:
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
Updates `.eslintrc.js` according to the following instructions:
- https://typescript-eslint.io/getting-started#step-2-configuration
- https://typescript-eslint.io/linting/troubleshooting/#i-am-running-into-errors-when-parsing-typescript-in-my-vue-files
Some ESLint errors are detected due to introduction of the TypeScript
rules.
- Changes the entry file of `@ntohq/buefy-next` in the development mode: `index.js` → `index.ts` Adds `.ts` to `resolve.extensions`.
- Adds a new script `type-check` that checks types. `tsconfig.json` is a basic configuration for TypeScript. `allowJs` option in `tsconfig.json` shall be removed after TypeScript migration completes.
Fixes and works around type errors in `main.ts`: - Removes `vueApp.config.productionTip` because it no longer exists in Vue 3. See https://v3-migration.vuejs.org/breaking-changes/global-api.html#config-productiontip-removed - Works around type errors related to tiny-emitter - Augments Vue component instance so that `$http` and `$eventHub` are available in every component.
- `build` script runs both `type-check` and `vite build` in parallel. Introduces a new script `build-only` that runs only `vite build`. Installs `npm-run-all2` to parallelly runs scripts.
- To prevent version discrepancies, hoists the following dependencies
used in both `buefy-next` and `docs` packages:
- `vue`
- `vite`
- `@vitejs/plugin-vue`
- `vue-tsc`
- `@vue/tsconfig`
- `sass`
Installs missing type definitions that `packages/docs` depends on: - `@types/lodash` - `@types/scrollreveal` - `@types/cleave.js`: Although the installed version of `cleave.js` is 1.0.1, `@types/cleave.js` v1.4.12 is installed. Because older versions did not correctly declare its types. It should not harm as long as the actual usage of `cleave.js` does not change. - `@types/sortablejs`: I have no idea about which version of `@types/sortablejs` I should install, though, it should not matter as long as the code actually using `sortablejs` does not change, and type-checking passes. - Applies npm audit suggestions
Introduces TypeScript project references so that `packages/docs` can import files and declaration files from `packages/buefy-next`. The new `tsconfig.json` in the root folder defines which tsconfig files are included in the project. As we focus on type declarations of `packages/buefy-next`, only `tsconfig.types.json` is included from `packages/buefy-next` into the project. `packages/docs` introduces a new `tsconfig.types.json` file that is configured not to import types from `packages/buefy-next/dist` but to directly include `package/buefy-next/src` during type check. `packages/docs/tsconfig.types.json` is also included in the project. These tsconfig files must have "composite" and "declaration" `true`. Please refer to TypeScript documentation for more details about "Project Reference". https://www.typescriptlang.org/docs/handbook/project-references.html `.gitignore` ignores `*.tsbuildinfo` files that are generated if project references are enabled. In `packages/docs`, `type-check` now uses `tsconfig.types.json` as the TypeScript configuration to directly include `packages/buefy-next/src`. `build` script calls a new script `build:type-check` that uses `tsconfig.json` as the TypeScript configuration and imports types from `packages/buefy-next/dist` instead. Also fixes the error in `packages/buefy-next/tsconfig.types.json` that "emitDeclarationOnly" was turned on while "noEmit" is `true`. Sets "noEmit" `false`.
- Lets `api-extractor` fail if there is any compiler error, but not fail if there is any TSDoc related warnings even in production; we get a lot of such warnings due to missing release quality tags; i.e., `@alpha`, `@beta`, `@public`, and `@internal`.
Includes `vite/client` in `compilerOptions.types` so that Vite specific qualifiers can be properly typed; e.g., `?raw`. Also includes "jsdom" to suppress `window` related errors. `tsconfig.types.json` extends `tsconfig.json` instead of `@vue/tsconfig/tsconfig.dom.json` to avoid discrepancies between development and production. Adds "@/" as an alias of the `src` folder to `paths` in both `tsconfig.json` and `tsconfig.types.json`.
- Fixes the type error caused at the line where components are installed to the Vue app. `components/index.js` is renamed to `components/index.ts` and exports an array of components as default. `index.ts` extracts components from the default export of `components/index.ts` instead of enumerating all the exported items from `components/index.ts`.
- Exports individual components from `components/index.ts` and `index.ts` so that users can benefit from type checking. For now, users have to import individual Buefy components they use to check types of the components; type checking won't work on components globally installed by `App.use(Buefy)`. `components/index.ts` used to export only install functions of components.
- `.gitignore` ignores the `temp-dts` folder that temporarily keeps type declarations.
Introduces a new file `utils/vue-augmentation.ts` that declares the module augmentation for `Vue` so that Vue components can access the Buefy global API through `this.$buefy`. It augments `ComponentCustomProperties` to include `$buefy`. `$buefy` only has `globalNoticeInterval` and other fields typed `any` for now, but must be refined in the future. This file will result in `vue-augmentation.d.ts` after TypeScript processing, which must be appended to `buefy.d.ts` because `api-extractor` won't include the module augmentation in the rolled up output. A new script `build/augment-dts.mjs` does this job, and `build:dts` script runs `build/augment-dts.mjs` after `api-extractor` outputs `buefy.d.ts`. `build/augment-dts.mjs` excludes lines starting with `import` from `src/utils/vue-augmentation.d.ts` before appending it to the declaration file body. Because the imported paths should be already in the declaration file body and relative imports will spoil those types. `index.ts` includes `utils/vue-augmentation.ts` to activate the module augmentation.
Replaces `module` field of `package.json`: `dist/esm/index.js` → `dist/buefy.esm.js`.
- Fixes the error that `build/vetur.js` failed to load the Tag API from `.js` file because the Tag API was replaced with the `.ts` file. Tries to read `.ts` file first, and then falls back to `.js` file. This workaround will become unnecessary when we complete TypeScript migration.
Works around the type error in `ExProgrammatically` example of `Datepicker`. Adds `<script>` section without the language prop to make it a JavaScript component. This has to be reverted after we complete TypeScript migration.
- Adds test cases for `matchWithGroups` defined in `utils/helpers.js`. As rewriting `matchWithGroups` in TypeScript will involve some changes in the flow, we should define tests before rewriting it.
- Adds tests for `toCssWidth` defined in `utils/helpers.js`. As
rewriting `toCssWidth` in TypeScript will involve a behavioral change
to it, we should define tests for it. The change is how `NaN` is
handled:
- before: `NaN` is returned as `NaN` (number)
- after: `NaN` is returned as "NaN" (string)
By the above change, we can declare the return value as `string` or
`null`. Passing `NaN` to `toCssWidth` is erroneous anyway.
Also updates `utils/helpers.js` to pass the tests.
- This commit is just for the record of the name change.
Rewrites `src/components/TheNavbar` in TypeScript. A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/components/VariablesView.vue` in TypeScript. A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/pages/404.vue` in TypeScript. All the changes are straightforward. Here is a tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components
Rewrites `src/components/CodepenEdit.vue` in TypeScript: - Makes `code` required so that null checks are unnecessary A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/components/TheSidebar.vue` in TypeScript: - Introduces a type `PageRoute` which represents the return type of the `normalizedData` method. I decided not to simply use a union of `PageTree` and `Route`, because type-checking in the `<template>` would become cumbersome. A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/pages/Expo.vue` in TypeScript. All the changes are straightforward. Here is a tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/pages/Home.vue` in TypeScript. All the changes are straightforward. Here is a tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/pages/installation/ConstructorOptions.vue` in TypeScript. Also renames `src/pages/installation/api/constructor-options.(js → ts). Fixes the issue that Vite complained about the missing `buefy` package, which was not actually used. This was caused by the code snippets `ConstructorOptions.vue`, which Vite conufsed with the actual code and tried to translate them. Moves these code snippets to a separate TypeScript file `usage/constructor-options.ts`.
Rewrites `src/pages/installation/Start.vue` in TypeScript. Fixes the issue that Vite complained about the missing `buefy` package, which was not actually used. This was caused by the code snippets in `Start.vue`, which Vite conufsed with the actual code and tried to translate them. Moves these code snippets to a separate TypeScript file `usage/start.ts`. Here is a tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/pages/installation/Customization.vue` in TypeScript. Fixes the issue that Vite complained about the missing `buefy` package, which was not actually used. This was caused by the code snippets in `Customization.vue`, which Vite conufsed with the actual code and tried to translate them. Moves these code snippets to a separate TypeScript file `usage/customization.ts`. Here is a tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites `src/components/Example.vue` in TypeScript: - Explicitly imports and registers `CodeView` so that it is type-checked
Rewrites the example in the `src/pages/extensions/bulmacssvars` folder
in TypeScript.
In `examples/ExFormat.vue`:
- I decided to exempt `bulma-css-vars` from type-checking because I got
the following error due to a problem in the `package.json` when I ran
`npm run type-check`:
> Could not find a declaration file for module 'bulma-css-vars'.
'../bulma-css-vars/dist/esm/index.js' implicitly has an 'any' type.
There are types at '../bulma-css-vars/dist/types/index.d.ts', but
this result could not be resolved when respecting package.json
"exports". The 'bulma-css-vars' library may need to update its
package.json or typings.
In `BulmaCssVars.vue`:
- Wraps `ExFormat` with `shallowRef` to resolve the warning about
making a component reactive
A tip for TypeScript migration:
- Explicitly import and register Buefy components so that they are
type-checked. Note that no type-checking is performed for globally
registered components.
Rewrites the Cleave.js example in the `src/pages/extensions/cleavejs` in TypeScript. Includes overlooked Vue 2 → 3 migration. In `examples/ExFormat.vue`: - Rewrites the `cleave` directive so that it satisfies the Vue 3 API: - `bind` → `beforeMount` - `unbind` → `unmounted` - Removes `name` - Introduces a new interface `CleaveContainer` to facilitate accessing the `_vCleave` field attached to the input element - Removes the `.native` modifier from the `@input` event binding, because it is no longer necessary in Vue 3 In `Cleavejs.vue`: - Wraps `ExFormat` in `shallowRef` to resolve the warning about making a component reactive A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites the documentation for the sortable extension in the
`src/pages/extensions/sortablejs` in TypeScript. Also includes
overlooked Vue 2 → 3 migration.
In `examples/ExSimple.vue`:
- Adapts the `createSortable` function so that it works well with the
Vue 3 directive API:
- Accepts an instance of `BTaginput` instead of `VNode`. The component
instance should be obtained from the `binding` parameter rather than
the `vnode` parameter in the Vue 3 directive API.
- The `$buefy` global property is a part of `ComponentPublicInstance`;
i.e., can be accessed via a `BTaginput` instance
- Refurbishes the `sortable` directive using the Vue 3 directive API:
- `bind` → `beforeMount`
- `update` → `updated`
- `unbind` → `unmounted`
- Introduces a new interface `SortablejsContainer` which facilitate
accessing the `_sortable` field attached to `HTMLElement`
In `Sortablejs.vue`:
- Wraps `ExSimple` in a `shallowRef` call to address the warning about
making a component instance reactive
A tip for TypeScript migration:
- Explicitly import and register Buefy components so that they are
type-checked. Note that no type-checking is performed for globally
registered components.
Rewrites the documentation for the VueBreakpointMixin extension in the `src/pages/extensions/vuebreakpointmixin` folder in TypeScript. Also includes overlooked Vue 2 → 3 migration. In `example/ExVueBreakpointMixin.vue`: - Imports `VueBreakpointMixin` as `any`, because it does not provide types. A newly introduced type `VueBreakpointMixinType` supplements the types of the computed values of `VueBreakpointMixin`. - Adds the `onMounted` and `beforeUnmount` methods to `VueBreakpointMixin`, which are aliases of the `mounted` and `beforeDestroy` methods respectively, so that `VueBreakpointMixin` conforms to the Vue 3 API In `VueBreakpointMixin.vue`: - Wraps `ExVueBreakpointMixin` in `shallowRef` to address the warning about making a component reactive A tip for TypeScript migration: - Explicitly import and register Buefy components so that they are type-checked. Note that no type-checking is performed for globally registered components.
Rewrites the router defined in the `src/router` folder in TypeScript. In `index.(js → ts)`: - Augments the `RouteMeta` interface provided by `vue-router` with the `Route` interface defined in `src/data/routes.ts` so that the application can access the current `Route` information through the Vue router's meta data without any type error. Common benign changes: - Removes unused method parameters
Rewrites `src/templates/Documentation.vue` in TypeScript. All the changes are straightforward.
* chore(gha): restore linting The `verify.yml` workflow starts linting again. * fix(docs): missing lang="ts" attributes Adds missing `lang="ts"` attributes to some example components.
✅ Deploy Preview for buefy-nextdocs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Closed
8 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes: #411
Proposed Changes
v0.2.0to NPMNotes