Add type module (#421)

Description of changes

Add `type: module` to package.json and update various build/test scripts.

Author: hawkticehurst

.eslintrc.js renamed to .eslintrc.cjs

@@ -5,6 +5,7 @@
 	"homepage": "https://github.com/microsoft/vscode-webview-ui-toolkit#readme",
 	"license": "MIT",
 	"author": "Microsoft Corporation",
+	"type": "module",
 	"bugs": {
 		"url": "https://github.com/microsoft/vscode-webview-ui-toolkit/issues"
 	},

.storybook/babel.config.js renamed to .storybook/babel.config.cjs

@@ -1,26 +1,26 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-const fs = require('fs');
-const path = require('path');
+import {existsSync, lstatSync, mkdirSync, readdirSync, readFileSync, rmdirSync, unlinkSync, writeFileSync} from 'fs';
+import path from 'path';
 
-function createDir(dir) {
-	if (!fs.existsSync(dir)) {
-		fs.mkdirSync(dir);
+export function createDir(dir) {
+	if (!existsSync(dir)) {
+		mkdirSync(dir);
 	}
 }
 
-function copyDir(source, target) {
+export function copyDir(source, target) {
 	let files = [];
 	const targetFolder = path.join(target, path.basename(source));
-	if (!fs.existsSync(targetFolder)) {
-		fs.mkdirSync(targetFolder);
+	if (!existsSync(targetFolder)) {
+		mkdirSync(targetFolder);
 	}
-	if (fs.lstatSync(source).isDirectory()) {
-		files = fs.readdirSync(source);
+	if (lstatSync(source).isDirectory()) {
+		files = readdirSync(source);
 		files.forEach(function (file) {
 			const curSource = path.join(source, file);
-			if (fs.lstatSync(curSource).isDirectory()) {
+			if (lstatSync(curSource).isDirectory()) {
 				copyDir(curSource, targetFolder);
 			} else {
 				copyFile(curSource, targetFolder);
@@ -29,14 +29,14 @@ function copyDir(source, target) {
 	}
 }
 
-function copyFile(source, target) {
+export function copyFile(source, target) {
 	let targetFile = target;
-	if (fs.existsSync(target)) {
-		if (fs.lstatSync(target).isDirectory()) {
+	if (existsSync(target)) {
+		if (lstatSync(target).isDirectory()) {
 			targetFile = path.join(target, path.basename(source));
 		}
 	}
-	fs.writeFileSync(targetFile, fs.readFileSync(source));
+	writeFileSync(targetFile, readFileSync(source));
 }
 
 const colors = {
@@ -48,32 +48,24 @@ const colors = {
 	cyan: '\x1b[36m',
 };
 
-function color(opts, text) {
+export function color(opts, text) {
 	let colorString = '';
 	for (const opt of opts) {
 		colorString += colors[opt];
 	}
 	return `${colorString}${text}${colors.reset}`;
 }
 
-function delDir(path) {
-	if (fs.existsSync(path) && fs.lstatSync(path).isDirectory()) {
-		fs.readdirSync(path).forEach(function (file, index) {
+export function delDir(path) {
+	if (existsSync(path) && lstatSync(path).isDirectory()) {
+		readdirSync(path).forEach(function (file, index) {
 			const currPath = path + '/' + file;
-			if (fs.lstatSync(currPath).isDirectory()) {
+			if (lstatSync(currPath).isDirectory()) {
 				delDir(currPath);
 			} else {
-				fs.unlinkSync(currPath);
+				unlinkSync(currPath);
 			}
 		});
-		fs.rmdirSync(path);
+		rmdirSync(path);
 	}
 }
-
-module.exports = {
-	createDir,
-	copyDir,
-	copyFile,
-	color,
-	delDir,
-};

.storybook/main.js renamed to .storybook/main.cjs

@@ -1,9 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-const {copyDir, color, delDir} = require('./helpers');
-const fsPromises = require('fs').promises;
-const process = require('process');
+import {copyDir, color, delDir} from './helpers.js';
+import process from 'process';
+import {readFile, writeFile} from 'fs/promises';
 
 /**
  * Developer note:
@@ -67,7 +67,7 @@ async function updateReactBuildImportPaths(path) {
 
 	// Read React build file and update import paths if appropriate
 	try {
-		const fileContents = await fsPromises.readFile(path, {encoding: 'utf8'});
+		const fileContents = await readFile(path, {encoding: 'utf8'});
 		// These regex strings rely on an assumption that they will not change
 		// If importing React components from the toolkit starts to break check here first
 		result = fileContents.replace(/\.\.\/index/g, '../dist/index');
@@ -80,7 +80,7 @@ async function updateReactBuildImportPaths(path) {
 
 	// Overwrite React build file with any updated import paths
 	try {
-		await fsPromises.writeFile(path, result, {encoding: 'utf8'});
+		await writeFile(path, result, {encoding: 'utf8'});
 	} catch (err) {
 		console.log(`${color(['red'], 'Error: Writing new React build file import paths failed.')}\n    ${err}`);
 		process.exit();

package.json

@@ -1,20 +1,20 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-const {createDir, copyDir, color, delDir} = require('./helpers');
-const {exec} = require('child_process');
-const fs = require('fs');
-const process = require('process');
-const util = require('util');
+import {createDir, copyDir, color, delDir} from './helpers.js';
+import {existsSync} from 'fs';
+import {exec} from 'child_process';
+import {promisify} from 'util';
+import process from 'process';
 
-const execShellCommand = util.promisify(exec);
+const execShellCommand = promisify(exec);
 
 async function main() {
 	// Empty print line to pretty-ify command line output
 	console.log();
 
 	// Copy webview test environment locally if it does not already exist
-	if (!fs.existsSync('./test-webview')) {
+	if (!existsSync('./test-webview')) {
 		try {
 			console.log(color(['dim'], 'Copying webview test environment locally...'));
 			await execShellCommand('npx degit microsoft/vscode-webview-ui-toolkit-samples/default/component-gallery test-webview');
@@ -25,7 +25,7 @@ async function main() {
 	}
 
 	// Install the webview test environment dependencies if they do not exist
-	if (!fs.existsSync('./test-webview/node_modules')) {
+	if (!existsSync('./test-webview/node_modules')) {
 		try {
 			console.log(color(['dim'], 'Installing webview test environment dependencies...'));
 			await execShellCommand('cd ./test-webview && npm install');