Migration from 0.1.6 to 0.2.0

[AriPerkkio]

Hello and welcome to the latest version of TutorialKit! 👋

The 0.2.0 release of TutorialKit introduced two breaking changes that require manual actions from users when updating. This guide describes the changes that are needed.

Feel free to leave a comment in this discussion if any help is needed! All feedback is welcome. 🙌

Example migration: https://github.com/AriPerkkio/tutorial-vite-plugin/pull/23/files

@tutorialkit/components-react package is now @tutorialkit/react

We have renamed the @tutorialkit/components-react package to @tutorialkit/react. Following change is needed in your package.json

"dependencies": {
-   "@tutorialkit/components-react": "^0.1.6",
+   "@tutorialkit/react": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }

Simplified UnoCSS integration

Previously TutorialKit required users to have quite complex uno.config.ts configuration file in their projects. Updates for this file were difficult to make as we always needed to instruct users to manually update their configurations. Now we have moved all the configuration to @tutorialkit packages so that users are no longer needed to maintain complex configurations themselves.

You can remove following packages from your package.json:

  "devDependencies": {
    "@astrojs/check": "^0.6.0",
    "@astrojs/react": "^3.3.4",
-   "@iconify-json/ph": "^1.1.12",
-   "@iconify-json/svg-spinners": "^1.1.2",
    "@tutorialkit/astro": "^0.1.6",
    "@tutorialkit/theme": "^0.1.6",
    "@types/node": "^20.12.7",
-   "@unocss/reset": "^0.59.4",
-   "@unocss/transformer-directives": "^0.59.4",
    "astro": "^4.8.6",
-   "fast-glob": "^3.3.2",
    "prettier": "^3.3.3",
    "prettier-plugin-astro": "^0.13.0",
    "typescript": "^5.4.5",
-   "unocss": "^0.59.4"
},

And update following packages to the new version. Make sure @tutorialkit/theme is also added.

  "devDependencies": {
    ...
-   "@tutorialkit/astro": "^0.1.6",
+   "@tutorialkit/astro": "^0.2.0",
-   "@tutorialkit/theme": "^0.1.6",
+   "@tutorialkit/theme": "^0.2.0",
-   "@tutorialkit/types": "^0.1.6",
+   "@tutorialkit/types": "^0.2.0",
    ...
},

In your uno.config.ts:

+ import { defineConfig } from '@tutorialkit/theme';
+ 
+ export default defineConfig({
+   // add your UnoCSS config here: https://unocss.dev/guide/config-file
+ });
- import { unoCSSConfig } from '@tutorialkit/astro';
- import { globSync, convertPathToPattern } from 'fast-glob';
- import fs from 'node:fs/promises';
- import { basename, dirname, join } from 'node:path';
- import { defineConfig, presetIcons, presetUno, transformerDirectives } from 'unocss';
- 
- const iconPaths = globSync('./icons/languages/*.svg');
- 
- const customIconCollection = iconPaths.reduce(
-   (acc, iconPath) => {
-     const collectionName = basename(dirname(iconPath));
-     const [iconName] = basename(iconPath).split('.');
- 
-     acc[collectionName] ??= {};
-     acc[collectionName][iconName] = async () => fs.readFile(iconPath, 'utf8');
- 
-     return acc;
-   },
-   {} as Record<string, Record<string, () => Promise<string>>>,
- );
- 
- export default defineConfig({
-   ...unoCSSConfig,
-   content: {
-     inline: globSync([
-       `${convertPathToPattern(join(require.resolve('@tutorialkit/components-react'), '..'))}/**/*.js`,
-       `${convertPathToPattern(join(require.resolve('@tutorialkit/astro'), '..'))}/default/**/*.astro`,
-     ]).map((filePath) => {
-       return () => fs.readFile(filePath, { encoding: 'utf8' });
-     }),
-   },
-   transformers: [transformerDirectives()],
-   presets: [
-     presetUno({
-       dark: {
-         dark: '[data-theme="dark"]',
-       },
-     }),
-     presetIcons({
-       collections: {
-         ...customIconCollection,
-       },
-     }),
-   ],
- });

For related commits see:

• feat!: simplify UnoCSS integration #270
• feat!: rename @tutorialkit/components-react to @tutorialkit/react #155