Remove js imports in examples (#3396)

* chore: remove file extensions from imports

* chore: use legacy pkg structure in package.json

* chore: semver

* fix: skip next build

* test: remove examples from module tests

Co-authored-by: Anthony Morris <amorriscode@gmail.com>

.yarn/versions/0acc6e0a.yml

@@ -0,0 +1,5 @@
+declined:
+  - react-dnd-examples
+  - "@react-dnd/asap"
+  - "@react-dnd/invariant"
+  - "@react-dnd/shallowequal"

module_test/api.json

@@ -38,8 +38,5 @@
     "tick": true,
     "wrapWithBackend": true,
     "wrapWithTestBackend": true
-  },
-  "examples": {
-    "componentIndex": true
   }
 }

module_test/cjs-imports.cjs

@@ -7,6 +7,5 @@ check(require('react-dnd-html5-backend'), 'htmlBackend')
 check(require('react-dnd-touch-backend'), 'touchBackend')
 check(require('react-dnd-test-backend'), 'testBackend')
 check(require('react-dnd-test-utils'), 'testUtils')
-check(require('react-dnd-examples'), 'examples')
 
 console.log('👍 CommonJS Modules OK')

module_test/mjs-imports.mjs

@@ -5,7 +5,6 @@ import * as htmlBackend from 'react-dnd-html5-backend'
 import * as touchBackend from 'react-dnd-touch-backend'
 import * as testBackend from 'react-dnd-test-backend'
 import * as testUtils from 'react-dnd-test-utils'
-import * as examples from 'react-dnd-examples'
 import { check } from './common.js'
 
 check(core, 'core')
@@ -14,6 +13,5 @@ check(htmlBackend, 'htmlBackend')
 check(touchBackend, 'touchBackend')
 check(testBackend, 'testBackend')
 check(testUtils, 'testUtils')
-check(examples, 'examples')
 
 console.log('👍 ESModules OK')

packages/examples/package.json

@@ -4,12 +4,8 @@
   "private": true,
   "description": "Drag and Drop for React",
   "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
-  "exports": {
-    "import": "./dist/esm/index.mjs",
-    "require": "./dist/cjs/index.js",
-    "types": "./dist/types/index.d.ts"
-  },
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -21,10 +17,8 @@
     "build_types": "tsc -b .",
     "build_esm": "swc -C module.type=es6 -d dist/esm src/",
     "build_cjs": "swc -C module.type=commonjs -d dist/cjs src/",
-    "esm_hack": "node ../../scripts/esmify.mjs",
-    "jsx_hack": "node ../../scripts/unjsxify.mjs dist/docs",
     "build_docs": "tsc -b tsconfig.docs.json",
-    "build": "run-s build_types build_esm build_cjs build_docs esm_hack jsx_hack"
+    "build": "run-s build_types build_esm build_cjs build_docs"
   },
   "dependencies": {
     "dnd-core": "workspace:packages/dnd-core",

packages/examples/src/00-chessboard/Board.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useEffect, useState } from 'react'
-import { BoardSquare } from './BoardSquare.js'
-import type { Game, Position } from './Game.js'
-import { Piece } from './Piece.js'
+import { BoardSquare } from './BoardSquare'
+import type { Game, Position } from './Game'
+import { Piece } from './Piece'
 
 export interface BoardProps {
 	game: Game

packages/examples/src/00-chessboard/BoardSquare.tsx

@@ -1,9 +1,9 @@
 import type { FC, ReactNode } from 'react'
 import { useDrop } from 'react-dnd'
-import { Square } from './Square.js'
-import { ItemTypes } from './ItemTypes.js'
-import { Overlay, OverlayType } from './Overlay.js'
-import type { Game } from './Game.js'
+import { Square } from './Square'
+import { ItemTypes } from './ItemTypes'
+import { Overlay, OverlayType } from './Overlay'
+import type { Game } from './Game'
 export interface BoardSquareProps {
 	x: number
 	y: number

packages/examples/src/00-chessboard/Knight.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties, FC } from 'react'
 import { DragPreviewImage, useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { knightImage } from './knightImage.js'
+import { ItemTypes } from './ItemTypes'
+import { knightImage } from './knightImage'
 
 const knightStyle: CSSProperties = {
 	fontSize: 40,

packages/examples/src/00-chessboard/Piece.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { Knight } from './Knight.js'
+import { Knight } from './Knight'
 
 export interface PieceProps {
 	isKnight: boolean

packages/examples/src/00-chessboard/TutorialApp.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, useMemo } from 'react'
-import { Board } from './Board.js'
-import { Game } from './Game.js'
+import { Board } from './Board'
+import { Game } from './Game'
 
 export interface ChessboardTutorialAppState {
 	knightPosition: [number, number]

packages/examples/src/00-chessboard/index.ts

@@ -1 +1 @@
-export { TutorialApp as default } from './TutorialApp.js'
+export { TutorialApp as default } from './TutorialApp'

packages/examples/src/01-dustbin/copy-or-move/Box.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, FC } from 'react'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 import { useDrag, DragSourceMonitor } from 'react-dnd'
 
 const style: CSSProperties = {

packages/examples/src/01-dustbin/copy-or-move/Container.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
 
 export const Container: FC = () => (
 	<div>

packages/examples/src/01-dustbin/copy-or-move/Dustbin.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC } from 'react'
 import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	height: '12rem',

packages/examples/src/01-dustbin/copy-or-move/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/01-dustbin/multiple-targets/Container.tsx

@@ -1,8 +1,8 @@
 import { FC, useState, useCallback, memo } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
-import { ItemTypes } from './ItemTypes.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
+import { ItemTypes } from './ItemTypes'
 import update from 'immutability-helper'
 
 interface DustbinState {

packages/examples/src/01-dustbin/multiple-targets/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/01-dustbin/single-target-in-iframe/Box.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC } from 'react'
 import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	border: '1px dashed gray',

packages/examples/src/01-dustbin/single-target-in-iframe/Container.tsx

@@ -1,8 +1,8 @@
 import type { FC, ReactNode } from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import Frame, { FrameContextConsumer } from 'react-frame-component'

packages/examples/src/01-dustbin/single-target-in-iframe/Dustbin.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC } from 'react'
 import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	height: '12rem',

packages/examples/src/01-dustbin/single-target-in-iframe/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/01-dustbin/single-target/Box.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC } from 'react'
 import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	border: '1px dashed gray',

packages/examples/src/01-dustbin/single-target/Container.tsx

@@ -1,6 +1,6 @@
 import { FC, memo } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
 
 export const Container: FC = memo(function Container() {
 	return (

packages/examples/src/01-dustbin/single-target/Dustbin.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC } from 'react'
 import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	height: '12rem',

packages/examples/src/01-dustbin/single-target/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/01-dustbin/stress-test/Container.tsx

@@ -1,10 +1,10 @@
 import { FC, useState, useEffect, useCallback, memo } from 'react'
 import { NativeTypes } from 'react-dnd-html5-backend'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
-import { ItemTypes } from './ItemTypes.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
+import { ItemTypes } from './ItemTypes'
 import update from 'immutability-helper'
-import shuffle from 'lodash/shuffle.js'
+import shuffle from 'lodash/shuffle'
 
 export interface SourceBox {
 	name: string

packages/examples/src/01-dustbin/stress-test/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/02-drag-around/custom-drag-layer/BoxDragPreview.tsx

@@ -1,5 +1,5 @@
 import { FC, CSSProperties, useEffect, useState, memo } from 'react'
-import { Box } from './Box.js'
+import { Box } from './Box'
 
 const styles: CSSProperties = {
 	display: 'inline-block',

packages/examples/src/02-drag-around/custom-drag-layer/Container.tsx

@@ -1,10 +1,10 @@
 import { CSSProperties, FC, useCallback, useState } from 'react'
 import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { DraggableBox } from './DraggableBox.js'
-import { snapToGrid as doSnapToGrid } from './snapToGrid.js'
+import { ItemTypes } from './ItemTypes'
+import { DraggableBox } from './DraggableBox'
+import { snapToGrid as doSnapToGrid } from './snapToGrid'
 import update from 'immutability-helper'
-import type { DragItem } from './interfaces.js'
+import type { DragItem } from './interfaces'
 
 const styles: CSSProperties = {
 	width: 300,

packages/examples/src/02-drag-around/custom-drag-layer/CustomDragLayer.tsx

@@ -1,8 +1,8 @@
 import type { CSSProperties, FC } from 'react'
 import { XYCoord, useDragLayer } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { BoxDragPreview } from './BoxDragPreview.js'
-import { snapToGrid } from './snapToGrid.js'
+import { ItemTypes } from './ItemTypes'
+import { BoxDragPreview } from './BoxDragPreview'
+import { snapToGrid } from './snapToGrid'
 
 const layerStyles: CSSProperties = {
 	position: 'fixed',

packages/examples/src/02-drag-around/custom-drag-layer/DraggableBox.tsx

@@ -1,8 +1,8 @@
 import { CSSProperties, FC, memo, useEffect } from 'react'
 import { useDrag, DragSourceMonitor } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 import { getEmptyImage } from 'react-dnd-html5-backend'
-import { Box } from './Box.js'
+import { Box } from './Box'
 
 function getStyles(
 	left: number,

packages/examples/src/02-drag-around/custom-drag-layer/Example.tsx

@@ -1,6 +1,6 @@
 import { FC, useState, useCallback } from 'react'
-import { Container } from './Container.js'
-import { CustomDragLayer } from './CustomDragLayer.js'
+import { Container } from './Container'
+import { CustomDragLayer } from './CustomDragLayer'
 
 export const Example: FC = () => {
 	const [snapToGridAfterDrop, setSnapToGridAfterDrop] = useState(false)

packages/examples/src/02-drag-around/custom-drag-layer/index.ts

@@ -1 +1 @@
-export { Example as default } from './Example.js'
+export { Example as default } from './Example'

packages/examples/src/02-drag-around/naive/Box.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, FC, ReactNode } from 'react'
 import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	position: 'absolute',

packages/examples/src/02-drag-around/naive/Container.tsx

@@ -1,9 +1,9 @@
 import { CSSProperties, FC, useCallback, useState } from 'react'
 import { useDrop, XYCoord } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
-import { Box } from './Box.js'
+import { ItemTypes } from './ItemTypes'
+import { Box } from './Box'
 import update from 'immutability-helper'
-import type { DragItem } from './interfaces.js'
+import type { DragItem } from './interfaces'
 
 const styles: CSSProperties = {
 	width: 300,

packages/examples/src/02-drag-around/naive/Example.tsx

@@ -1,5 +1,5 @@
 import { FC, useState, useCallback } from 'react'
-import { Container } from './Container.js'
+import { Container } from './Container'
 
 export const Example: FC = () => {
 	const [hideSourceOnDrag, setHideSourceOnDrag] = useState(true)

packages/examples/src/02-drag-around/naive/index.ts

@@ -1 +1 @@
-export { Example as default } from './Example.js'
+export { Example as default } from './Example'

packages/examples/src/03-nesting/drag-sources/Container.tsx

@@ -1,7 +1,7 @@
 import { FC, memo } from 'react'
-import { SourceBox } from './SourceBox.js'
-import { StatefulTargetBox as TargetBox } from './TargetBox.js'
-import { Colors } from './Colors.js'
+import { SourceBox } from './SourceBox'
+import { StatefulTargetBox as TargetBox } from './TargetBox'
+import { Colors } from './Colors'
 
 export const Container: FC = memo(function Container() {
 	return (

packages/examples/src/03-nesting/drag-sources/SourceBox.tsx

@@ -8,7 +8,7 @@ import {
 	ReactNode,
 } from 'react'
 import { useDrag, DragSourceMonitor } from 'react-dnd'
-import { Colors } from './Colors.js'
+import { Colors } from './Colors'
 
 const style: CSSProperties = {
 	border: '1px dashed gray',

packages/examples/src/03-nesting/drag-sources/TargetBox.tsx

@@ -1,7 +1,7 @@
 import { CSSProperties, FC, useState, useCallback, memo } from 'react'
 import { useDrop, DropTargetMonitor } from 'react-dnd'
-import { Colors } from './Colors.js'
-import type { DragItem } from './interfaces.js'
+import { Colors } from './Colors'
+import type { DragItem } from './interfaces'
 
 const style: CSSProperties = {
 	border: '1px solid gray',

packages/examples/src/03-nesting/drag-sources/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/03-nesting/drop-targets/Box.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { useDrag } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style = {
 	display: 'inline-block',

packages/examples/src/03-nesting/drop-targets/Container.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
-import { Dustbin } from './Dustbin.js'
-import { Box } from './Box.js'
+import { Dustbin } from './Dustbin'
+import { Box } from './Box'
 
 export const Container: FC = () => (
 	<div>

packages/examples/src/03-nesting/drop-targets/Dustbin.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, ReactNode, useState } from 'react'
 import { useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 function getStyle(backgroundColor: string): CSSProperties {
 	return {

packages/examples/src/03-nesting/drop-targets/index.ts

@@ -1 +1 @@
-export { Container as default } from './Container.js'
+export { Container as default } from './Container'

packages/examples/src/04-sortable/cancel-on-drop-outside/Card.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, FC, memo } from 'react'
 import { useDrag, useDrop } from 'react-dnd'
-import { ItemTypes } from './ItemTypes.js'
+import { ItemTypes } from './ItemTypes'
 
 const style: CSSProperties = {
 	border: '1px dashed gray',