Update examples to link to JS and TS source code (#1252)

* docs: add a typescript mode for emitting JS-based documentation * docs: add links to ts and js examples, update documentation build * docs: run prettier over tsc output doc js docs * docs: use spaces with published javascript
react-dnd · Mar 7, 2019 · f43fb00 · f43fb00
1 parent 646a26c
commit f43fb00
Show file tree

Hide file tree

Showing 23 changed files with 110 additions and 111 deletions.
diff --git a/packages/documentation-examples/package.json b/packages/documentation-examples/package.json
@@ -14,6 +14,7 @@
 		"clean": "rimraf lib",
 		"build:cjs": "tsc -b tsconfig.cjs.json",
 		"build:esm": "tsc -b tsconfig.esm.json",
+		"build:docs": "tsc -b tsconfig.docs.json",
 		"build": "run-p build:*",
 		"test": "run-s clean build",
 		"start": "tsc -w --preserveWatchOutput"

diff --git a/packages/documentation-examples/src/00 Chessboard/Board.tsx b/packages/documentation-examples/src/00 Chessboard/Board.tsx
@@ -6,6 +6,10 @@ export interface BoardProps {
 	knightPosition: [number, number]
 }
 
+/**
+ * The chessboard copmonent
+ * @param props The react props
+ */
 const Board: React.FC<BoardProps> = ({
 	knightPosition: [knightX, knightY],
 }) => {

diff --git a/packages/documentation-examples/tsconfig.docs.json b/packages/documentation-examples/tsconfig.docs.json
@@ -0,0 +1,11 @@
+{
+	"extends": "./tsconfig.esm.json",
+	"compilerOptions": {
+		"jsx": "preserve",
+		"outDir": "./lib/docs",
+		"baseUrl": "./",
+		"declaration": false,
+		"removeComments": false
+	},
+	"include": ["./src/index.ts"]
+}
diff --git a/packages/documentation/.gitignore b/packages/documentation/.gitignore
@@ -1,4 +1,5 @@
 .cache
 
 # Build directory
-/public
+/public
+/static/examples_js
diff --git a/packages/documentation/markdown/examples/chessboard/tutorial.md b/packages/documentation/markdown/examples/chessboard/tutorial.md
@@ -1,9 +1,10 @@
 ---
-path: "/examples/tutorial"
-title: "Tutorial"
+path: '/examples/tutorial'
+title: 'Tutorial'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/00%20Chessboard/)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/00%20Chessboard/)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/00%20Chessboard/)
 
 This is a sample app you'll build as you work through the [tutorial](/docs/tutorial)
 

diff --git a/packages/documentation/markdown/examples/customize/drop-effects.md b/packages/documentation/markdown/examples/customize/drop-effects.md
@@ -1,12 +1,13 @@
 ---
-path: "/examples/customize/drop-effects"
-title: "Drop Effects"
+path: '/examples/customize/drop-effects'
+title: 'Drop Effects'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/05%20Customize/Drop%20Effects)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/05%20Customize/Drop%20Effects)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/05%20Customize/Drop%20Effects)
 
 Some browsers let you specify the “drop effects” for the draggable
 items. In the compatible browsers, you will see a “copy” icon when you
 drag the first box over the drop zone.
 
-<customize-drop-effects></customize-drop-effects>
+<customize-drop-effects></customize-drop-effects>
diff --git a/packages/documentation/markdown/examples/customize/handles-and-previews.md b/packages/documentation/markdown/examples/customize/handles-and-previews.md
@@ -1,12 +1,13 @@
 ---
-path: "/examples/customize/handles-and-previews"
-title: "Handles and Previews"
+path: '/examples/customize/handles-and-previews'
+title: 'Handles and Previews'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/05%20Customize/Handles%20and%20Previews)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/05%20Customize/Handles%20and%20Previews)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/05%20Customize/Handles%20and%20Previews)
 
 React DnD lets you choose the draggable node, as well as the drag
 preview node in your component's `render` function.
 You may also use an [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) instance that you created programmatically once it has loaded.
 
-<customize-handles-and-previews></customize-handles-and-previews>
+<customize-handles-and-previews></customize-handles-and-previews>
diff --git a/packages/documentation/markdown/examples/drag-around/custom-drag-layer.md b/packages/documentation/markdown/examples/drag-around/custom-drag-layer.md
@@ -1,27 +1,24 @@
 ---
-path: "/examples/drag-around/custom-drag-layer"
-title: "Custom Drag Layer"
+path: '/examples/drag-around/custom-drag-layer'
+title: 'Custom Drag Layer'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/02%20Drag%20Around/Custom%20Drag%20Layer)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/02%20Drag%20Around/Custom%20Drag%20Layer)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/02%20Drag%20Around/Custom%20Drag%20Layer)
 
 The browser APIs provide no way to change the drag preview or its
 behavior once drag has started. Libraries such as jQuery UI implement
 the drag and drop from scratch to work around this, but react-dnd only
 supports browser drag and drop “backend” for now, so we have to accept
 its limitations.
-
 We can, however, customize behavior a great deal if we feed the
 browser an empty image as drag preview. This library provides a
 `DragLayer` that you can use to implement a fixed layer on
 top of your app where you'd draw a custom drag preview component.
-
 Note that we can draw a completely different component on our drag
 layer if we wish so. It's not just a screenshot.
 
 With this approach, we miss out on default “return” animation when
 dropping outside the container. However, we get great flexibility in
 customizing drag feedback and zero flicker.
-
 <drag-around-custom-drag-layer></drag-around-custom-drag-layer>
-
diff --git a/packages/documentation/markdown/examples/drag-around/naive.md b/packages/documentation/markdown/examples/drag-around/naive.md
@@ -1,9 +1,10 @@
 ---
-path: "/examples/drag-around/naive"
-title: "Naive"
+path: '/examples/drag-around/naive'
+title: 'Naive'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/02%20Drag%20Around/Naive)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/02%20Drag%20Around/Naive)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/02%20Drag%20Around/Naive)
 
 This example naively relies on browser drag and drop implementation
 without much custom logic.

diff --git a/packages/documentation/markdown/examples/dustbin/copy-or-move.md b/packages/documentation/markdown/examples/dustbin/copy-or-move.md
@@ -1,9 +1,10 @@
 ---
-path: "/examples/dustbin/copy-or-move"
-title: "Copy or Move"
+path: '/examples/dustbin/copy-or-move'
+title: 'Copy or Move'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Copy%20or%20Move)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Copy%20or%20Move)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Copy%20or%20Move)
 
 This example demonstrates drop targets that can accept copy and move
 drop effects, which users can switch between by holding down or

diff --git a/packages/documentation/markdown/examples/dustbin/iframe.md b/packages/documentation/markdown/examples/dustbin/iframe.md
@@ -1,8 +1,10 @@
 ---
-path: "/examples/dustbin/iframe"
-title: "iframe"
+path: '/examples/dustbin/iframe'
+title: 'iframe'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target%20in%20iframe)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Single%20Target%20in%20iframe)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target%20in%20iframe)
 
 This is the same simple example, but nested in an iframe.
 

diff --git a/packages/documentation/markdown/examples/dustbin/multiple-targets.md b/packages/documentation/markdown/examples/dustbin/multiple-targets.md
@@ -1,15 +1,15 @@
 ---
-path: "/examples/dustbin/multiple-targets"
-title: "Multiple Targets"
+path: '/examples/dustbin/multiple-targets'
+title: 'Multiple Targets'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Multiple%20Targets)
-
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Multiple%20Targets)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Multiple%20Targets)
 
 This is a slightly more interesting example.
-
 It demonstrates how a single drop target may accept multiple types,
 and how those types may be derived from props. It also demonstrates
 the handling of native files and URLs (try dropping them onto the last
 two dustbins).
 
-<dustbin-multiple-targets></dustbin-multiple-targets>
+<dustbin-multiple-targets></dustbin-multiple-targets>
diff --git a/packages/documentation/markdown/examples/dustbin/single-target.md b/packages/documentation/markdown/examples/dustbin/single-target.md
@@ -1,9 +1,10 @@
 ---
-path: "/examples/dustbin/single-target"
-title: "Single Target"
+path: '/examples/dustbin/single-target'
+title: 'Single Target'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Single%20Target)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target)
 
 This is the simplest example of drag and drop.
 

diff --git a/packages/documentation/markdown/examples/dustbin/stress-test.md b/packages/documentation/markdown/examples/dustbin/stress-test.md
@@ -1,15 +1,15 @@
 ---
-path: "/examples/dustbin/stress-test"
-title: "Stress Test"
+path: '/examples/dustbin/stress-test'
+title: 'Stress Test'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Stress%20Test)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Stress%20Test)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Stress%20Test)
 
 This example is similar to the previous one, but props of both the
 drag sources and the drop targets change every second. It demonstrates
 that React DnD keeps track of the changing props, and if a component
 receives the new props, React DnD recalculates the drag and drop
 state. It also shows how a custom `isDragging` implementation can make the drag source appear as dragged, even if the component that initiated the drag has received new props.
-
 
-<dustbin-stress-test></dustbin-stress-test>
+<dustbin-stress-test></dustbin-stress-test>
diff --git a/packages/documentation/markdown/examples/dustbin/using-fcs.md b/packages/documentation/markdown/examples/dustbin/using-fcs.md
@@ -1,9 +1,10 @@
 ---
-path: "/examples/dustbin/using-fcs"
-title: "Using FCs"
+path: '/examples/dustbin/using-fcs'
+title: 'Using FCs'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target%20with%20FCs)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/01%20Dustbin/Single%20Target%20with%20FCs)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/01%20Dustbin/Single%20Target%20with%20FCs)
 
 This is the same simple example, but written using React Function Components.
 

diff --git a/packages/documentation/markdown/examples/nesting/drag-sources.md b/packages/documentation/markdown/examples/nesting/drag-sources.md
@@ -1,13 +1,15 @@
 ---
-path: "/examples/nesting/drag-sources"
-title: "Drag Sources"
+path: '/examples/nesting/drag-sources'
+title: 'Drag Sources'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/03%20Nesting/Drag%20Sources)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/03%20Nesting/Drag%20Sources)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/03%20Nesting/Drag%20Sources)
 
 You can nest the drag sources in one another. If a nested drag source
 returns `false` from `canDrag`, its parent will
 be asked, until a draggable source is found and activated. Only the
 activated drag source will have its `beginDrag()` and
 `endDrag()` called.
 
-<nesting-drag-sources></nesting-drag-sources>
+<nesting-drag-sources></nesting-drag-sources>
diff --git a/packages/documentation/markdown/examples/nesting/drop-targets.md b/packages/documentation/markdown/examples/nesting/drop-targets.md
@@ -1,13 +1,15 @@
 ---
-path: "/examples/nesting/drop-targets"
-title: "Drop Targets"
+path: '/examples/nesting/drop-targets'
+title: 'Drop Targets'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/03%20Nesting/Drop%20Targets)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/03%20Nesting/Drop%20Targets)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/03%20Nesting/Drop%20Targets)
 
 Drop targets can, too, be nested in one another. Unlike the drag
 sources, several drop targets may react to the same item being
-dragged. 
+dragged.
 
-React DnD by design offers no means of stopping propagation.  Instead, the drop targets may compare `monitor.isOver()` and	`monitor.isOver({ shallow: false })`	to learn if just them, or their nested targets, are being hovered.	They may also check `monitor.didDrop()` and	`monitor.getDropResult()` to learn if a nested target has already handled the drop, and even return a different drop result.
+React DnD by design offers no means of stopping propagation. Instead, the drop targets may compare `monitor.isOver()` and `monitor.isOver({ shallow: false })` to learn if just them, or their nested targets, are being hovered. They may also check `monitor.didDrop()` and `monitor.getDropResult()` to learn if a nested target has already handled the drop, and even return a different drop result.
 
 <nesting-drop-targets></nesting-drop-targets>
diff --git a/packages/documentation/markdown/examples/other/native-files.md b/packages/documentation/markdown/examples/other/native-files.md
@@ -1,9 +1,11 @@
 ---
-path: "/examples/other/native-files"
-title: "Native Files"
+path: '/examples/other/native-files'
+title: 'Native Files'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/06%20Other/Native%20Files)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/06%20Other/Native%20Files)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/06%20Other/Native%20Files)
 
 Example demonstrating drag and drop of native files.
 
-<other-native-files></other-native-files>
+<other-native-files></other-native-files>
diff --git a/packages/documentation/markdown/examples/sortable/cancel-on-drop-outside.md b/packages/documentation/markdown/examples/sortable/cancel-on-drop-outside.md
@@ -1,12 +1,13 @@
 ---
-path: "/examples/sortable/cancel-on-drop-outside"
-title: "Cancel on Drop Outside"
+path: '/examples/sortable/cancel-on-drop-outside'
+title: 'Cancel on Drop Outside'
 ---
 
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Cancel%20on%20Drop%20Outside)
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/04%20Sortable/Cancel%20on%20Drop%20Outside)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Cancel%20on%20Drop%20Outside)
 
-Because you write the logic instead of using the ready-made components, 
-you can tweak the behavior to the one your app needs. 
+Because you write the logic instead of using the ready-made components,
+you can tweak the behavior to the one your app needs.
 
 In this example, instead of moving the card inside the drop target's `drop()` handler, we do it inside the drag source's `endDrag()` handler. This let us check `monitor.didDrop()` and revert the drag operation if the card was dropped outside its container.
 

diff --git a/packages/documentation/markdown/examples/sortable/simple.md b/packages/documentation/markdown/examples/sortable/simple.md
@@ -1,11 +1,13 @@
 ---
-path: "/examples/sortable/simple"
-title: "Simple"
+path: '/examples/sortable/simple'
+title: 'Simple'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Simple)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/04%20Sortable/Simple)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Simple)
 
 It is easy to implement a sortable interface with React DnD. Just make
 the same component both a drag source and a drop target, and reorder
 the data in the `hover` handler.
 
-<sortable-simple></sortable-simple>
+<sortable-simple></sortable-simple>
diff --git a/packages/documentation/markdown/examples/sortable/stress-test.md b/packages/documentation/markdown/examples/sortable/stress-test.md
@@ -1,8 +1,10 @@
 ---
-path: "/examples/sortable/stress-test"
-title: "Stress Test"
+path: '/examples/sortable/stress-test'
+title: 'Stress Test'
 ---
-[Browse the Source](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Stress%20Test)
+
+[JavaScript](https://github.com/react-dnd/react-dnd/tree/gh-pages/examples_js/04%20Sortable/Stress%20Test)
+[TypeScript](https://github.com/react-dnd/react-dnd/tree/master/packages/documentation-examples/src/04%20Sortable/Stress%20Test)
 
 How many items can React DnD handle at the same time? There are a
 thousand items in this list. With some optimizations like updating the
@@ -22,5 +24,4 @@ scrolling with a parent drop target that compares
 handler. In fact, you are welcome to contribute this functionality to
 this example!
 
-
 <sortable-stress-test></sortable-stress-test>
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
@@ -43,14 +43,17 @@
 	},
 	"devDependencies": {
 		"gh-pages": "^2.0.1",
-		"npm-run-all": "^4.1.5"
+		"npm-run-all": "^4.1.5",
+		"prettier": "^1.16.4"
 	},
 	"scripts": {
-		"clean": "rimraf .cache public apidocs",
+		"clean": "rimraf .cache public apidocs static/examples_js",
 		"develop": "gatsby develop",
 		"start": "npm run develop",
+		"copy_example_source": "cp -r ../documentation-examples/lib/docs static/examples_js",
+		"format_example_source": "prettier 'static/examples_js/**/*.js*' --use-tabs=false --write",
 		"build_static_site": "gatsby build --prefix-paths",
 		"publish_gh_pages": "NODE_DEBUG=gh-pages gh-pages -d public -t",
-		"release": "run-s clean build_static_site publish_gh_pages"
+		"release": "run-s clean copy_example_source format_example_source build_static_site publish_gh_pages"
 	}
 }