feat!: migrate to native esm (#1079)

- use "type": "module"
- use "exports"
- convert cjs scripts to esm
- adjust relative imports to use .js postfix
- use node16 target/moduleResolution
- mark package as "sideEffects": false
- avoid publishing src/test and src/tsconfig.json

build-board-index.js

@@ -1,8 +1,8 @@
-const { writeFileSync } = require('node:fs');
-const { join, parse, relative, basename, extname } = require('node:path');
-const { globSync } = require('glob');
+import { writeFileSync } from 'node:fs';
+import { join, parse, relative, basename, extname } from 'node:path';
+import { globSync } from 'glob';
 
-const srcPath = join(__dirname, 'packages/components/src');
+const srcPath = join(import.meta.dirname, 'packages/components/src');
 const boardIndexPath = join(srcPath, 'board-index.ts');
 const boardPaths = globSync('**/*.board.tsx');
 const nameCounters = {};
@@ -11,7 +11,7 @@ const imports = [];
 for (const boardPath of boardPaths) {
     const parsedBoardPath = parse(boardPath);
     const relativePath = relative(srcPath, boardPath);
-    const relativeSpecifier = `./${relativePath.replace(/\\/g, '/')}`.slice(0, -parsedBoardPath.ext.length);
+    const relativeSpecifier = `./${relativePath.replace(/\\/g, '/')}`.slice(0, -parsedBoardPath.ext.length) + '.js';
     const nameWithoutDotBoard = basename(parsedBoardPath.name, extname(parsedBoardPath.name));
     const escapedName = nameWithoutDotBoard.replace(/-/g, '_');
     const localName = nameCounters[escapedName] ? `${escapedName}${nameCounters[escapedName]}` : escapedName;

esbuild.config.js

@@ -1,8 +1,8 @@
 // @ts-check
 
-const { stylablePlugin } = require('@stylable/esbuild');
+import { stylablePlugin } from '@stylable/esbuild';
 
 /** @type {import('esbuild').BuildOptions} */
-module.exports = {
+export default {
     plugins: [stylablePlugin({ cssInjection: 'js' })],
 };

package.json

@@ -1,5 +1,7 @@
 {
   "name": "stylable-components-repo",
+  "private": true,
+  "type": "module",
   "workspaces": [
     "packages/*"
   ],
@@ -45,6 +47,5 @@
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.18.0"
   },
-  "license": "MIT",
-  "private": true
+  "license": "MIT"
 }

packages/components/package.json

@@ -1,8 +1,9 @@
 {
   "name": "stylable-components",
   "version": "1.3.8",
+  "type": "module",
   "description": "React components that use Stylable.",
-  "main": "dist/index.js",
+  "exports": "./dist/index.js",
   "scripts": {
     "test": "mocha \"dist/test/**/*.spec.js\""
   },
@@ -15,12 +16,13 @@
   "files": [
     "dist",
     "src",
-    "!dist/test",
-    "!dist/tsconfig.tsbuildinfo"
+    "!*/test",
+    "!*/tsconfig.{json,tsbuildinfo}"
   ],
   "license": "MIT",
   "repository": "[email protected]:wixplosives/stylable-components.git",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "sideEffects": false
 }

packages/components/src/_codux/boards/hooks/use-element-size/use-element-size.board.tsx

@@ -1,6 +1,6 @@
 import { createBoard } from '@wixc3/react-board';
 import React, { useRef } from 'react';
-import { useElementSize } from '../../../../hooks/use-element-size';
+import { useElementSize } from '../../../../hooks/use-element-size.js';
 
 export const ElementDimensionsHookSimulator = ({ height, width }: { width?: string; height?: string }) => {
     const element = useRef<HTMLDivElement>(null);

packages/components/src/_codux/boards/scenario-renderer/scenario-renderer.board.tsx

@@ -1,7 +1,7 @@
 import { createBoard } from '@wixc3/react-board';
 import React, { useReducer } from 'react';
-import { noop } from '../../../board-assets';
-import { ScenarioRenderer } from '../../../board-plugins';
+import { noop } from '../../../board-assets/index.js';
+import { ScenarioRenderer } from '../../../board-plugins/index.js';
 
 export default createBoard({
     name: 'ScenarioRenderer',

packages/components/src/area/boards/area.board.tsx

@@ -1,8 +1,8 @@
 import { createBoard } from '@wixc3/react-board';
 import React from 'react';
-import { projectThemesPlugin } from '../../board-plugins';
-import { AddFileIcon } from '../../icons';
-import { Area } from '../area';
+import { projectThemesPlugin } from '../../board-plugins/index.js';
+import { AddFileIcon } from '../../icons/index.js';
+import { Area } from '../area.js';
 
 export default createBoard({
     name: 'Area',

packages/components/src/area/index.ts

@@ -1 +1 @@
-export * from './area';
+export * from './area.js';

packages/components/src/board-assets/index.ts

@@ -1,6 +1,6 @@
-export * from './item-renderer/item-renderer';
-export * from './item-renderer-expanded/item-renderer-expandable';
-export * from './items';
-export * from './utils';
-export * from './li-item-renderer';
-export * from './stateful-item-renderer';
+export * from './item-renderer/item-renderer.js';
+export * from './item-renderer-expanded/item-renderer-expandable.js';
+export * from './items.js';
+export * from './utils.js';
+export * from './li-item-renderer.js';
+export * from './stateful-item-renderer.js';

packages/components/src/board-assets/item-renderer-expanded/item-renderer-expandable.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useState } from 'react';
-import type { ListItemProps } from '../../list/list';
-import type { ItemData } from '../items';
+import type { ListItemProps } from '../../list/list.js';
+import type { ItemData } from '../items.js';
 
 export const ExpandableItemRenderer: React.FC<ListItemProps<ItemData>> = memo(function ExpandableItemRenderer(props) {
     const [isExpanded, setExpanded] = useState(true);

packages/components/src/board-assets/item-renderer/item-renderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ListItemProps } from '../../list/list';
-import { SearchableText } from '../../searchable-text/searchable-text';
-import type { ItemData } from '../items';
+import type { ListItemProps } from '../../list/list.js';
+import { SearchableText } from '../../searchable-text/searchable-text.js';
+import type { ItemData } from '../items.js';
 import { classes, st } from './item-renderer.st.css';
 
 export const ItemRenderer: React.FC<ListItemProps<ItemData>> = (props) => {

packages/components/src/board-assets/li-item-renderer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { ListItemProps } from '../list/list';
-import type { ItemData } from './index';
+import type { ListItemProps } from '../list/list.js';
+import type { ItemData } from './index.js';
 import { classes, st } from './item-renderer/item-renderer.st.css';
 
 export const LIItemRenderer: React.FC<ListItemProps<ItemData>> = (props) => {

packages/components/src/board-assets/stateful-item-renderer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { ListItemProps } from '../list/list';
-import type { ItemData } from './';
+import type { ListItemProps } from '../list/list.js';
 import { classes, st } from './item-renderer/item-renderer.st.css';
+import type { ItemData } from './items.js';
 
 export const StatefulItemRenderer: React.FC<ListItemProps<ItemData>> = (props) => {
     return (

packages/components/src/board-assets/tree-items/lanes/element-item-renderer.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { ChevronRightWixUiIcon, ComponentIcon } from '../../../icons';
-import { SearchableText } from '../../../searchable-text/searchable-text';
-import type { TreeItemInfo, TreeItemProps } from '../../../tree';
+import { ChevronRightWixUiIcon, ComponentIcon } from '../../../icons/index.js';
+import { SearchableText } from '../../../searchable-text/searchable-text.js';
+import type { TreeItemInfo, TreeItemProps } from '../../../tree/index.js';
 import { st, classes, vars } from '../../tree-items/lanes/element-item-renderer.st.css';
-import { lanesContext } from '../../tree-items/lanes/lane-context';
+import { lanesContext } from '../../tree-items/lanes/lane-context.js';
 
 export interface ElementData<TREEITEMS> {
     kind: 'element';

packages/components/src/board-assets/tree-items/lanes/lane-context.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TreeItemWithLaneData } from '../../tree-items/tree-item-with-lane-renderer';
+import type { TreeItemWithLaneData } from '../../tree-items/tree-item-with-lane-renderer.js';
 
 export const lanesContext = React.createContext({
     getIndent(_item: TreeItemWithLaneData): number {

packages/components/src/board-assets/tree-items/lanes/lane-item-renderer.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
-import { ChevronRightWixUiIcon } from '../../../icons';
-import { SearchableText } from '../../../searchable-text/searchable-text';
-import type { TreeItemInfo, TreeItemProps } from '../../../tree';
-import { lanesContext } from '../../tree-items/lanes/lane-context';
+import { ChevronRightWixUiIcon } from '../../../icons/index.js';
+import { SearchableText } from '../../../searchable-text/searchable-text.js';
+import type { TreeItemInfo, TreeItemProps } from '../../../tree/index.js';
+import { lanesContext } from '../../tree-items/lanes/lane-context.js';
 import { classes, st, vars } from '../../tree-items/lanes/lane-item-renderer.st.css';
 
 export interface LaneItem {

packages/components/src/board-assets/tree-items/lanes/marker-item-renderer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
-import { SearchableText } from '../../../searchable-text/searchable-text';
-import type { TreeItemInfo, TreeItemProps } from '../../../tree/';
-import { lanesContext } from '../../tree-items/lanes/lane-context';
+import { SearchableText } from '../../../searchable-text/searchable-text.js';
+import type { TreeItemInfo, TreeItemProps } from '../../../tree/index.js';
+import { lanesContext } from '../../tree-items/lanes/lane-context.js';
 import { classes, st, vars } from '../../tree-items/lanes/marker-item-renderer.st.css';
 
 export interface MarkerData<TREEITEMS> {

packages/components/src/board-assets/tree-items/lanes/overlays-renderer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
-import type { TreeOverlayProps } from '../../../tree';
-import { lanesContext } from '../../tree-items/lanes/lane-context';
-import type { TreeItemWithLaneData } from '../../tree-items/tree-item-with-lane-renderer';
+import type { TreeOverlayProps } from '../../../tree/index.js';
+import { lanesContext } from '../../tree-items/lanes/lane-context.js';
+import type { TreeItemWithLaneData } from '../../tree-items/tree-item-with-lane-renderer.js';
 import { classes, st, vars } from '../../tree-items/lanes/overlays-renderer.st.css';
 
 export const OverlayRenderer = (props: TreeOverlayProps<TreeItemWithLaneData>) => {
@@ -34,7 +34,7 @@ export const OverlayRenderer = (props: TreeOverlayProps<TreeItemWithLaneData>) =
                 start: number;
                 end: number;
             }
-        >()
+        >(),
     );
     return (
         <div className={classes.root} style={props.style}>

packages/components/src/board-assets/tree-items/tree-item-renderer.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { TreeItemData } from '../';
-import { ChevronRightWixUiIcon } from '../../icons/wix-ui/chevron-right';
-import { SearchableText } from '../../searchable-text/searchable-text';
-import type { TreeItemProps } from '../../tree';
+import { ChevronRightWixUiIcon } from '../../icons/wix-ui/chevron-right.js';
+import { SearchableText } from '../../searchable-text/searchable-text.js';
+import type { TreeItemProps } from '../../tree/index.js';
 import { classes, st, vars } from '../tree-items/tree-item-renderer.st.css';
+import type { TreeItemData } from '../items.js';
 
 export const TreeItemRenderer: React.FC<TreeItemProps<TreeItemData>> = (props) => {
     return (

packages/components/src/board-assets/tree-items/tree-item-with-lane-renderer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { LaneData, calcLaneSize } from '../tree-items/lanes/lane-item-renderer';
-import { ElementData, ElementRenderer, calcElementSize } from '../tree-items/lanes/element-item-renderer';
-import { MarkerData, MarkerRenderer, calcMarkerSize } from '../tree-items/lanes/marker-item-renderer';
-import type { TreeItemInfo, TreeItemProps } from '../../tree';
+import { LaneData, calcLaneSize } from '../tree-items/lanes/lane-item-renderer.js';
+import { ElementData, ElementRenderer, calcElementSize } from '../tree-items/lanes/element-item-renderer.js';
+import { MarkerData, MarkerRenderer, calcMarkerSize } from '../tree-items/lanes/marker-item-renderer.js';
+import type { TreeItemInfo, TreeItemProps } from '../../tree/index.js';
 
 export type TreeItemWithLaneData =
     | LaneData<TreeItemWithLaneData>
@@ -13,8 +13,8 @@ export const calcItemSize = (item: TreeItemInfo<TreeItemWithLaneData>) => {
     return item.data.kind === 'element'
         ? calcElementSize(item as TreeItemInfo<ElementData<TreeItemWithLaneData>>)
         : item.data.kind === 'lane'
-        ? calcLaneSize(item as TreeItemInfo<LaneData<TreeItemWithLaneData>>)
-        : calcMarkerSize(item as TreeItemInfo<MarkerData<TreeItemWithLaneData>>);
+          ? calcLaneSize(item as TreeItemInfo<LaneData<TreeItemWithLaneData>>)
+          : calcMarkerSize(item as TreeItemInfo<MarkerData<TreeItemWithLaneData>>);
 };
 
 export const TreeItemWithLaneRenderer: React.FC<TreeItemProps<TreeItemWithLaneData>> = (props) => {

packages/components/src/board-index.ts

@@ -4,39 +4,39 @@
  * generated at 'build-board-index.js'
  * do no edit manually
  */
-import area from './area/boards/area.board';
-import button from './button/boards/button.board';
-import button_with_icon from './button/boards/button-with-icon.board';
-import button_with_icons from './button/boards/button-with-icons.board';
-import cancel_button from './button/boards/cancel-button.board';
-import data_grid from './data-grid/boards/data-grid.board';
-import emphasis_button from './button/boards/emphasis-button.board';
-import grid_list from './list/boards/grid-list.board';
-import icon_simulator from './icons/boards/icon-simulator.board';
-import infinite_scrolling from './scroll-list/boards/infinite-scrolling.board';
-import input from './input/boards/input.board';
-import input_with_clear from './input-with-clear/boards/input-with-clear.board';
-import items_change_size from './scroll-list/boards/items-change-size.board';
-import items_in_row from './scroll-list/boards/items-in-row.board';
-import list from './list/boards/list.board';
-import list_with_li from './list/boards/list-with-li.board';
-import no_unmount from './scroll-list/boards/no-unmount.board';
-import preloader from './preloader/boards/preloader.board';
-import scenario_renderer from './_codux/boards/scenario-renderer/scenario-renderer.board';
-import scroll_list from './scroll-list/boards/scroll-list.board';
-import scroll_offset from './scroll-list/boards/scroll-offset.board';
-import scroll_ref from './scroll-list/boards/scroll-ref.board';
-import scroll_to_selection from './scroll-list/boards/scroll-to-selection.board';
-import searchable_text from './searchable-text/boards/searchable-text.board';
-import tree from './tree/boards/tree.board';
-import tree_focus from './tree/boards/tree-focus.board';
-import tree_keyboard from './tree/boards/tree-keyboard.board';
-import tree_with_lanes from './tree/boards/tree-with-lanes.board';
-import use_element_size from './_codux/boards/hooks/use-element-size/use-element-size.board';
-import use_scroll_horizontal_window from './hooks/boards/use-scroll/use-scroll-horizontal-window.board';
-import use_scroll_vertical_window from './hooks/boards/use-scroll/use-scroll-vertical-window.board';
-import use_scroll_with_ref from './hooks/boards/use-scroll/use-scroll-with-ref.board';
-import with_header from './scroll-list/boards/with-header.board';
+import area from './area/boards/area.board.js';
+import button from './button/boards/button.board.js';
+import button_with_icon from './button/boards/button-with-icon.board.js';
+import button_with_icons from './button/boards/button-with-icons.board.js';
+import cancel_button from './button/boards/cancel-button.board.js';
+import data_grid from './data-grid/boards/data-grid.board.js';
+import emphasis_button from './button/boards/emphasis-button.board.js';
+import grid_list from './list/boards/grid-list.board.js';
+import icon_simulator from './icons/boards/icon-simulator.board.js';
+import infinite_scrolling from './scroll-list/boards/infinite-scrolling.board.js';
+import input from './input/boards/input.board.js';
+import input_with_clear from './input-with-clear/boards/input-with-clear.board.js';
+import items_change_size from './scroll-list/boards/items-change-size.board.js';
+import items_in_row from './scroll-list/boards/items-in-row.board.js';
+import list from './list/boards/list.board.js';
+import list_with_li from './list/boards/list-with-li.board.js';
+import no_unmount from './scroll-list/boards/no-unmount.board.js';
+import preloader from './preloader/boards/preloader.board.js';
+import scenario_renderer from './_codux/boards/scenario-renderer/scenario-renderer.board.js';
+import scroll_list from './scroll-list/boards/scroll-list.board.js';
+import scroll_offset from './scroll-list/boards/scroll-offset.board.js';
+import scroll_ref from './scroll-list/boards/scroll-ref.board.js';
+import scroll_to_selection from './scroll-list/boards/scroll-to-selection.board.js';
+import searchable_text from './searchable-text/boards/searchable-text.board.js';
+import tree from './tree/boards/tree.board.js';
+import tree_focus from './tree/boards/tree-focus.board.js';
+import tree_keyboard from './tree/boards/tree-keyboard.board.js';
+import tree_with_lanes from './tree/boards/tree-with-lanes.board.js';
+import use_element_size from './_codux/boards/hooks/use-element-size/use-element-size.board.js';
+import use_scroll_horizontal_window from './hooks/boards/use-scroll/use-scroll-horizontal-window.board.js';
+import use_scroll_vertical_window from './hooks/boards/use-scroll/use-scroll-vertical-window.board.js';
+import use_scroll_with_ref from './hooks/boards/use-scroll/use-scroll-with-ref.board.js';
+import with_header from './scroll-list/boards/with-header.board.js';
 
 export default [
     area,

packages/components/src/board-plugins/index.ts

@@ -1,2 +1,2 @@
-export * from './scenario-plugin/scenario-plugin';
-export * from './project-themes-plugin';
+export * from './scenario-plugin/scenario-plugin.js';
+export * from './project-themes-plugin.js';

packages/components/src/board-plugins/project-themes-plugin.tsx

@@ -1,6 +1,6 @@
 import { classes as black } from '../themes/black.st.css';
 import { classes as white } from '../themes/white.st.css';
-import { themePlugin } from './theme-plugin/theme-plugin';
+import { themePlugin } from './theme-plugin/theme-plugin.js';
 
 export const projectThemesPlugin = themePlugin.use({
     themes: [

packages/components/src/board-plugins/scenario-plugin/actions/check-item-render-state.ts

@@ -1,5 +1,5 @@
 import { expect } from 'chai';
-import { Action, expectElement } from '../scenario-plugin';
+import { Action, expectElement } from '../scenario-plugin.js';
 
 export const checkItemRenderState = (id: string): Action =>
     expectElement(`[data-id='${id}']`, (element) => expect(element).to.exist, `Element [data-id='${id}'] is rendered`);

packages/components/src/board-plugins/scenario-plugin/actions/index.ts

@@ -1,2 +1,2 @@
-export * from './check-item-render-state';
-export * from './select-item-by-index';
+export * from './check-item-render-state.js';
+export * from './select-item-by-index.js';

packages/components/src/board-plugins/scenario-plugin/actions/select-item-by-index.ts

@@ -1,5 +1,5 @@
 import { fireEvent } from '@testing-library/react';
-import { Action, waitForElement } from '../scenario-plugin';
+import { Action, waitForElement } from '../scenario-plugin.js';
 
 export const selectItemInput = 'input';
 export const selectItemButton = 'button';

packages/components/src/board-plugins/scenario-plugin/scenario-plugin.tsx

@@ -4,7 +4,7 @@ import { fireEvent } from '@testing-library/react';
 import { expect } from 'chai';
 import { sleep, waitFor } from 'promise-assist';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
-import { renderInPluginControls } from '../plugin-controls/plugin-controls';
+import { renderInPluginControls } from '../plugin-controls/plugin-controls.js';
 import { classes, st } from './scenario-plugin.st.css';
 
 export interface Action {