refactor(locales, sw): use es module (#11204)

* refactor(locales): use es module

* fix sw build

* fix gulp

* try fixing storybook

* Revert "try fixing storybook"

This reverts commit 5f2a4eee016776381a7d80407e28d129c252228f.

* try fixing storybook 2

* Update main.ts

* Update build.js

* Update main.ts

* Update changes.ts

* fix sw lint

* Update build.js

gulpfile.mjs

@@ -2,14 +2,14 @@
  * Gulp tasks
  */
 
-const fs = require('fs');
+import * as fs from 'node:fs';
-const gulp = require('gulp');
+import gulp from 'gulp';
-const replace = require('gulp-replace');
+import replace from 'gulp-replace';
-const terser = require('gulp-terser');
+import terser from 'gulp-terser';
-const cssnano = require('gulp-cssnano');
+import cssnano from 'gulp-cssnano';
 
-const locales = require('./locales');
+import locales from './locales/index.js';
-const meta = require('./package.json');
+import meta from './package.json' assert { type: "json" };
 
 gulp.task('copy:backend:views', () =>
 	gulp.src('./packages/backend/src/server/web/views/**/*').pipe(gulp.dest('./packages/backend/built/server/web/views'))

locales/generateDTS.js

@@ -1,6 +1,6 @@
-const fs = require('fs');
+import * as fs from 'node:fs';
-const yaml = require('js-yaml');
+import * as yaml from 'js-yaml';
-const ts = require('typescript');
+import * as ts from 'typescript';
 
 function createMembers(record) {
 	return Object.entries(record)
@@ -14,7 +14,7 @@ function createMembers(record) {
 		));
 }
 
-module.exports = function generateDTS() {
+export default function generateDTS() {
 	const locale = yaml.load(fs.readFileSync(`${__dirname}/ja-JP.yml`, 'utf-8'));
 	const members = createMembers(locale);
 	const elements = [

locales/index.js

@@ -2,8 +2,8 @@
  * Languages Loader
  */
 
-const fs = require('fs');
+import * as fs from 'node:fs';
-const yaml = require('js-yaml');
+import * as yaml from 'js-yaml';
 
 const merge = (...args) => args.reduce((a, c) => ({
 	...a,
@@ -51,9 +51,9 @@ const primaries = {
 // 何故か文字列にバックスペース文字が混入することがあり、YAMLが壊れるので取り除く
 const clean = (text) => text.replace(new RegExp(String.fromCodePoint(0x08), 'g'), '');
 
-const locales = languages.reduce((a, c) => (a[c] = yaml.load(clean(fs.readFileSync(`${__dirname}/${c}.yml`, 'utf-8'))) || {}, a), {});
+const locales = languages.reduce((a, c) => (a[c] = yaml.load(clean(fs.readFileSync(new URL(`${c}.yml`, import.meta.url), 'utf-8'))) || {}, a), {});
 
-module.exports = Object.entries(locales)
+export default Object.entries(locales)
 	.reduce((a, [k ,v]) => (a[k] = (() => {
 		const [lang] = k.split('-');
 		switch (k) {

locales/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

packages/frontend/.storybook/changes.ts

@@ -1,7 +1,10 @@
 import fs from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import micromatch from 'micromatch';
-import main from './main';
+import main from './main.js';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 interface Stats {
 	readonly modules: readonly {
@@ -13,8 +16,8 @@ interface Stats {
 	}[];
 }
 
-fs.readFile(
+await fs.readFile(
-	path.resolve(__dirname, '../storybook-static/preview-stats.json')
+	new URL('../storybook-static/preview-stats.json', import.meta.url)
 ).then((buffer) => {
 	const stats: Stats = JSON.parse(buffer.toString());
 	const keys = new Set(stats.modules.map((stat) => stat.id));

packages/frontend/.storybook/main.ts

@@ -1,7 +1,11 @@
 import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import type { StorybookConfig } from '@storybook/vue3-vite';
 import { type Plugin, mergeConfig } from 'vite';
 import turbosnap from 'vite-plugin-turbosnap';
+
+const dirname = fileURLToPath(new URL('.', import.meta.url));
+
 const config = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
 	addons: [
@@ -9,7 +13,7 @@ const config = {
 		'@storybook/addon-interactions',
 		'@storybook/addon-links',
 		'@storybook/addon-storysource',
-		resolve(__dirname, '../node_modules/storybook-addon-misskey-theme'),
+		resolve(dirname, '../node_modules/storybook-addon-misskey-theme'),
 	],
 	framework: {
 		name: '@storybook/vue3-vite',
@@ -28,7 +32,8 @@ const config = {
 		}
 		return mergeConfig(config, {
 			plugins: [
-				turbosnap({
+				// XXX: https://github.com/IanVS/vite-plugin-turbosnap/issues/8
+				(turbosnap as any as typeof turbosnap['default'])({
 					rootDir: config.root ?? process.cwd(),
 				}),
 			],

packages/frontend/.storybook/package.json

@@ -0,0 +1,3 @@
+{
+	"type": "module"
+}

packages/frontend/.storybook/preload-locale.ts

@@ -1,9 +1,8 @@
 import { writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
+import * as locales from '../../../locales/index.js';
-import * as locales from '../../../locales';
 
-writeFile(
+await writeFile(
-	resolve(__dirname, 'locale.ts'),
+	new URL('locale.ts', import.meta.url),
 	`export default ${JSON.stringify(locales['ja-JP'], undefined, 2)} as const;`,
 	'utf8',
 )

packages/frontend/.storybook/preload-theme.ts

@@ -1,6 +1,5 @@
 import { readFile, writeFile } from 'node:fs/promises';
-import { resolve } from 'node:path';
+import JSON5 from 'json5';
-import * as JSON5 from 'json5';
 
 const keys = [
 	'_dark',
@@ -26,9 +25,9 @@ const keys = [
 	'd-u0',
 ]
 
-Promise.all(keys.map((key) => readFile(resolve(__dirname, `../src/themes/${key}.json5`), 'utf8'))).then((sources) => {
+await Promise.all(keys.map((key) => readFile(new URL(`../src/themes/${key}.json5`, import.meta.url), 'utf8'))).then((sources) => {
 	writeFile(
-		resolve(__dirname, './themes.ts'),
+		new URL('./themes.ts', import.meta.url),
 		`export default ${JSON.stringify(
 			Object.fromEntries(sources.map((source, i) => [keys[i], JSON5.parse(source)])),
 			undefined,

packages/frontend/.storybook/preview.ts

@@ -3,10 +3,10 @@ import { FORCE_REMOUNT } from '@storybook/core-events';
 import { type Preview, setup } from '@storybook/vue3';
 import isChromatic from 'chromatic/isChromatic';
 import { initialize, mswDecorator } from 'msw-storybook-addon';
-import { userDetailed } from './fakes';
+import { userDetailed } from './fakes.js';
-import locale from './locale';
+import locale from './locale.js';
-import { commonHandlers, onUnhandledRequest } from './mocks';
+import { commonHandlers, onUnhandledRequest } from './mocks.js';
-import themes from './themes';
+import themes from './themes.js';
 import '../src/style.scss';
 
 const appInitialized = Symbol();

packages/frontend/.storybook/tsconfig.json

@@ -1,5 +1,7 @@
 {
 	"compilerOptions": {
+		"target": "es2022",
+		"module": "Node16",
 		"strict": true,
 		"allowUnusedLabels": false,
 		"allowUnreachableCode": false,

packages/sw/build.js

@@ -1,10 +1,13 @@
 // @ts-check
 
-const esbuild = require('esbuild');
+import { fileURLToPath } from 'node:url';
-const locales = require('../../locales');
+import * as esbuild from 'esbuild';
-const meta = require('../../package.json');
+import locales from '../../locales/index.js';
+import meta from '../../package.json' assert { type: "json" };
 const watch = process.argv[2]?.includes('watch');
 
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
 console.log('Starting SW building...');
 
 /** @type {esbuild.BuildOptions} */

packages/sw/package.json

@@ -19,5 +19,6 @@
 		"eslint": "8.44.0",
 		"eslint-plugin-import": "2.27.5",
 		"typescript": "5.1.6"
-	}
+	},
+	"type": "module"
 }