chore: move repo to ESM

Author: userquin

.eslintrc.js .eslintrc.cjs

@@ -1,11 +1,11 @@
 'use strict'
 
 module.exports = {
-  'no-render-string-reference': require('./scripts/rules/no-render-string-reference'),
-  'no-components-index': require('./scripts/rules/no-components-index'),
-  'jsx-condition-key': require('./scripts/rules/jsx-condition-key'),
-  'jsx-curly-spacing': require('./scripts/rules/jsx-curly-spacing'),
-  'vitest-global-imports': require('./scripts/rules/vitest-global-imports'),
-  'sort-imports': require('./scripts/rules/sort-imports'),
-  'no-nullish-coalescing-in-condition': require('./scripts/rules/no-nullish-coalescing-in-condition'),
+  'no-render-string-reference': require('./scripts/rules/no-render-string-reference.cjs'),
+  'no-components-index': require('./scripts/rules/no-components-index.cjs'),
+  'jsx-condition-key': require('./scripts/rules/jsx-condition-key.cjs'),
+  'jsx-curly-spacing': require('./scripts/rules/jsx-curly-spacing.cjs'),
+  'vitest-global-imports': require('./scripts/rules/vitest-global-imports.cjs'),
+  'sort-imports': require('./scripts/rules/sort-imports.cjs'),
+  'no-nullish-coalescing-in-condition': require('./scripts/rules/no-nullish-coalescing-in-condition.cjs'),
 }

eslint-local-rules.js eslint-local-rules.cjs

@@ -1,5 +1,6 @@
 {
   "name": "@vuetify/vuetify-root",
+  "type": "module",
   "private": true,
   "husky": {
     "hooks": {

jest.config.js jest.config.cjs

@@ -1,5 +1,6 @@
 {
   "name": "@vuetify/api-generator",
+  "type": "module",
   "version": "3.7.16",
   "private": true,
   "description": "",

package.json

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 
 function processVariableFile (filePath: string) {
   if (fs.existsSync(filePath)) {

packages/api-generator/package.json

@@ -1,6 +1,5 @@
-import fs from 'fs/promises'
+import fs from 'node:fs/promises'
 import path from 'upath'
-import { components } from 'vuetify/dist/vuetify-labs.js'
 import importMap from 'vuetify/dist/json/importMap.json' with { type: 'json' }
 import importMapLabs from 'vuetify/dist/json/importMap-labs.json' with { type: 'json' }
 import { kebabCase } from './helpers/text'
@@ -17,6 +16,10 @@ import inspector from 'inspector'
 import yargs from 'yargs'
 import { parseSassVariables } from './helpers/sass'
 
+import { createRequire } from 'node:module'
+
+const { components } = createRequire(import.meta.url)('vuetify/dist/vuetify-labs.js')
+
 const yar = yargs(process.argv.slice(2))
   .option('components', {
     type: 'array',

packages/api-generator/src/helpers/sass.ts

@@ -1,4 +1,4 @@
-import { execSync } from 'child_process'
+import { execSync } from 'node:child_process'
 import stringifyObject from 'stringify-object'
 import prettier from 'prettier'
 import * as typescriptParser from 'prettier/plugins/typescript'

packages/api-generator/src/index.ts

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 import { kebabCase } from './helpers/text'
 import type { ComponentData } from './types'
 

packages/api-generator/src/utils.ts

@@ -1,4 +1,4 @@
-import fs from 'fs'
+import fs from 'node:fs'
 import { capitalize } from './helpers/text'
 import type { ComponentData, DirectiveData } from './types'
 import pkg from '../package.json' with { type: 'json' }

packages/api-generator/src/vetur.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from 'vite'
-import path from 'path'
-import fs from 'fs/promises'
-import { fileURLToPath } from 'url'
+import path from 'node:path'
+import fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 
 const ID = '@vuetify-examples'
 

packages/api-generator/src/web-types.ts

@@ -1,5 +1,6 @@
 {
   "name": "vuetifyjs.com",
+  "type": "module",
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",

packages/docs/.eslintrc.js packages/docs/.eslintrc.cjs

@@ -1,6 +1,6 @@
 import path from 'upath'
-import fs from 'fs/promises'
-import { fileURLToPath } from 'url'
+import fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 
 import { defineConfig, loadEnv } from 'vite'
 import AutoImport from 'unplugin-auto-import/vite'

packages/docs/build/examples-plugin.ts

@@ -0,0 +1,17 @@
+import packageJson from '../package.json' with { type: 'json' }
+import path from 'upath'
+import { fileURLToPath } from 'node:url'
+
+export const banner = `/*!
+* Vuetify v${packageJson.version}
+* Forged by John Leider
+* Released under the MIT License.
+*/\n`
+
+export const root = path.resolve(fileURLToPath(import.meta.url), '../..')
+export const srcDir = path.resolve(root, 'src')
+export const libDir = path.resolve(root, 'lib')
+export const unpluginLibDistDir = path.resolve(libDir, 'unplugin')
+export const labsDir = path.resolve(srcDir, 'labs')
+
+export const externals = Array.from(Object.keys(packageJson.devDependencies))

packages/docs/jest-runner-eslint.config.js packages/docs/jest-runner-eslint.config.cjs

@@ -1,7 +1,7 @@
 import path from 'upath'
 import { mkdirp } from 'mkdirp'
-import { writeFile } from 'fs/promises'
-import { fileURLToPath } from 'url'
+import { writeFile } from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 
 import packageJson from '../package.json' with { type: 'json' }
 
@@ -15,20 +15,18 @@ import autoprefixer from 'autoprefixer'
 import cssnano from 'cssnano'
 import postcss from 'postcss'
 import { simple as walk } from 'acorn-walk'
+import {
+  banner,
+  labsDir,
+  libDir,
+  root,
+  srcDir,
+} from './constants.js'
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.es6', '.es', '.mjs']
-const banner = `/*!
-* Vuetify v${packageJson.version}
-* Forged by John Leider
-* Released under the MIT License.
-*/\n`
 
-const root = path.resolve(fileURLToPath(import.meta.url), '../..')
-const srcDir = path.resolve(root, 'src')
-const libDir = path.resolve(root, 'lib')
-const labsDir = path.resolve(srcDir, 'labs')
-
-export default [
+/** @type {import("rollup").RollupOptions[]} */
+const options = [
   {
     input: 'src/entry-bundler.ts',
     output: [
@@ -294,3 +292,5 @@ export default [
     ],
   },
 ]
+
+export default options

packages/docs/jest.config.js packages/docs/jest.config.cjs

@@ -1,5 +1,5 @@
-import fs from 'fs/promises'
-import { fileURLToPath } from 'url'
+import fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 
 import dts from 'rollup-plugin-dts'
 import fg from 'fast-glob'
@@ -9,6 +9,10 @@ import MagicString from 'magic-string'
 import importMap from '../dist/json/importMap.json' with { type: 'json' }
 import importMapLabs from '../dist/json/importMap-labs.json' with { type: 'json' }
 
+/**
+ * @param code {string}
+ * @returns {string}
+ */
 export function codeTransform (code) {
   return code
     // ignore missing vue-router
@@ -17,6 +21,13 @@ export function codeTransform (code) {
     .replaceAll(/^\s*export \{\s*\};?$/gm, '')
 }
 
+/**
+ * @param input {string}
+ * @param output {string}
+ * @param renderChunk {import("rollup").RenderChunkHook | undefined}
+ * @param filter {(files: string[]) => string[] | undefined}
+ * @returns {import("rollup").RollupOptions[]}
+ */
 function createTypesConfig (input, output, renderChunk, filter) {
   input = 'lib/' + input
   let files = fg.sync(input)
@@ -25,7 +36,8 @@ function createTypesConfig (input, output, renderChunk, filter) {
 
   return files.map(file => {
     const outputFile = output.replace('*', mm.capture(input, file)[0])
-    return {
+    /** @type {import("rollup").RollupOptions} */
+    const options = {
       input: file,
       output: [{ file: outputFile, format: 'es', sourcemap: false }],
       plugins: [
@@ -51,9 +63,14 @@ function createTypesConfig (input, output, renderChunk, filter) {
         },
       ],
     }
+    return options
   })
 }
 
+/**
+ * @param useImport {boolean|undefined}
+ * @returns {Promise<string>}
+ */
 async function getShims (useImport) {
   let components
   if (useImport) {
@@ -75,7 +92,8 @@ async function getShims (useImport) {
     .replace(/^\s*\/\/ @generate-components$/gm, components)
 }
 
-export default [
+/** @type {import("rollup").RollupOptions[]} */
+const options = [
   createTypesConfig('entry-bundler.d.ts', 'dist/vuetify.d.ts', async code => {
     code.replaceAll(/type index_d\$1_V(\w+) = V(\w+);/gm, 'declare const index_d$$1_V$1: typeof V$2;')
     code.append('\n\n')
@@ -91,3 +109,5 @@ export default [
     code.append(await getShims(true))
   }),
 ].flat()
+
+export default options

packages/docs/package.json

@@ -1,6 +1,6 @@
 // Utilities
-import fs from 'fs'
-import path from 'path'
+import fs from 'node:fs'
+import path from 'node:path'
 import * as locales from '../'
 
 describe('locales', () => {

packages/docs/vite.config.mts

@@ -1,6 +1,6 @@
-import path from 'path'
-import fs, { readFileSync } from 'fs'
-import { fileURLToPath } from 'url'
+import path from 'node:path'
+import fs, { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
 
 import fg from 'fast-glob'
 import { defineConfig, loadEnv } from 'vite'
@@ -34,12 +34,12 @@ export default defineConfig(({ mode }) => {
     root: resolve('dev'),
     server: {
       host: process.env.HOST,
-      port: process.env.TEST ? undefined : +(process.env.PORT ?? 8090),
+      port: process.env.TEST ? undefined : Number(process.env.PORT ?? 8090),
       strictPort: !!process.env.PORT && !process.env.TEST,
     },
     preview: {
       host: process.env.HOST,
-      port: +(process.env.PORT ?? 8090),
+      port: Number(process.env.PORT ?? 8090),
       strictPort: !!process.env.PORT,
     },
     resolve: {

packages/vuetify/build/constants.js

@@ -1,7 +1,7 @@
 import { defineConfig, mergeConfig } from 'vitest/config'
 import viteConfig from './vite.config'
 import AutoImport from 'unplugin-auto-import/vite'
-import { fileURLToPath } from 'url'
+import { fileURLToPath } from 'node:url'
 
 const IS_RUN = process.argv.slice(2).some(v => v === 'run')
 

packages/vuetify/build/rollup.config.js

@@ -1,6 +1,6 @@
 import { defineWorkspace } from 'vitest/config'
 import { commands } from './test/setup/browser-commands'
-import { fileURLToPath } from 'url'
+import { fileURLToPath } from 'node:url'
 
 export default defineWorkspace([
   {

packages/vuetify/build/rollup.types.config.js

@@ -1,4 +1,4 @@
-const spawn = require('cross-spawn')
+import { spawn } from 'cross-spawn'
 
 let target = process.argv[2]
 const alias = {

packages/vuetify/src/locale/__tests__/index.spec.ts

@@ -1,10 +1,14 @@
-const semver = require('semver')
-const shell = require('shelljs')
-const inquirer = require('inquirer')
-const version = require('../lerna.json').version
+import semver from 'semver'
+import shell from 'shelljs'
+import inquirer from 'inquirer'
+import lerna from '../lerna.json' with { type: 'json' }
 
 if (process.env.CI) process.exit(0)
 
+/**
+ * @param command {string}
+ * @returns {string}
+ */
 function exec (command) {
   const result = shell.exec(command, { silent: true })
   if (result.code) {
@@ -16,9 +20,9 @@ function exec (command) {
 }
 
 const branch = exec('git symbolic-ref --short HEAD')
-const tag = semver.prerelease(version) == null ? 'latest' : branch
+const tag = semver.prerelease(lerna.version) == null ? 'latest' : branch
 
-shell.echo(`Releasing ${version} on ${branch}`)
+shell.echo(`Releasing ${lerna.version} on ${branch}`)
 shell.echo(`Tag: ${tag}`)
 inquirer.prompt({
   type: 'confirm',

packages/vuetify/vite.config.ts

@@ -1,9 +1,12 @@
 // Utilities
-const fs = require('fs')
-const path = require('path')
-const glob = require('glob')
-const stringify = require('stringify-object')
-const resolve = file => path.resolve(__dirname, file)
+import fs from 'node:fs'
+import path from 'node:path'
+import glob from 'glob'
+import stringify from 'stringify-object'
+import url from 'node:url'
+
+const root = path.dirname(url.fileURLToPath(import.meta.url))
+const resolve = file => path.resolve(root, file)
 
 const snippetsUsed = new Set()
 

packages/vuetify/vitest.config.ts

@@ -1,4 +1,4 @@
-const spawn = require('cross-spawn')
+import { spawn } from 'cross-spawn'
 
 let target = process.argv[2]
 const alias = {

packages/vuetify/vitest.workspace.ts

@@ -1,4 +1,4 @@
-const fs = require('fs')
+import fs from 'node:fs'
 
 const reset = '\x1b[0m'
 const red = '\x1b[31m'
@@ -8,6 +8,10 @@ const currentMessage = fs.readFileSync(messageFile, 'utf8').replace(/^# --------
 
 const errors = []
 
+/**
+ * @param message {string}
+ * @param cb {(currentMessage: string) => boolean}
+ */
 function check (message, cb) {
   if (cb(currentMessage)) {
     errors.push(message)

scripts/build.js

@@ -1,5 +1,5 @@
-import fs from 'fs/promises'
-import path from 'path'
+import fs from 'node:fs/promises'
+import path from 'node:path'
 import { ESLint } from 'eslint'
 import { convertSrc } from 'vue-composition-converter'
 

scripts/confirm-npm-tag.js

@@ -1,4 +1,4 @@
-const semver = require('semver')
+import semver from 'semver'
 
 const version = process.argv[2]
 

scripts/converter.js

@@ -1,7 +1,11 @@
-const shell = require('shelljs')
-const fs = require('fs')
-const path = require('path')
-const resolve = target => path.resolve(__dirname, target)
+import shell from 'shelljs'
+import fs from 'node:fs'
+import path from 'node:path'
+import url from 'node:url'
+
+const root = path.dirname(url.fileURLToPath(import.meta.url))
+const resolve = target => path.resolve(root, target)
+
 const devTargetFolder = '../packages/vuetify/dev'
 const devTargetFile = `${devTargetFolder}/Playground.vue`