Merge pull request #343 from artsy/damassi/chore/example-deps

chore(examples): Does some cleanup and some dep updates

examples/basic/package.json

@@ -7,7 +7,7 @@
     "start": "babel-node --extensions '.ts,.tsx,.js,.jsx' src/server.tsx"
   },
   "dependencies": {
-    "@artsy/fresnel": "latest",
+    "@artsy/fresnel": "../../dist",
     "@babel/node": "^7.4.5",
     "express": "^4.17.1",
     "react": "^18.2.0",
@@ -23,7 +23,7 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "8.0.6",
-    "webpack": "4.32.0",
+    "webpack": "^5.89.0",
     "webpack-cli": "3.3.2",
     "webpack-dev-middleware": "3.7.0"
   }

examples/basic/tsconfig.json

@@ -5,15 +5,13 @@
     "declaration": true,
     "experimentalDecorators": true,
     "jsx": "react",
-    "keyofStringsOnly": true,
     "lib": ["dom", "es2015", "es2016", "es2017"],
     "module": "commonjs",
     "moduleResolution": "node",
     "noImplicitAny": false,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "outDir": "dist",
-    "rootDir": "src",
     "skipLibCheck": true,
     "target": "es2015",
     "strict": true

examples/kitchen-sink/package.json

@@ -4,11 +4,11 @@
   "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "start": "babel-node --extensions '.ts,.tsx,.js,.jsx' src/server.tsx"
+    "start": "babel-node --extensions '.ts,.tsx,.js,.jsx' server.tsx"
   },
   "dependencies": {
     "@artsy/detect-responsive-traits": "0.1.0",
-    "@artsy/fresnel": "latest",
+    "@artsy/fresnel": "../../dist",
     "@babel/node": "^7.4.5",
     "express": "^4.17.0",
     "react": "^18.2.0",
@@ -24,9 +24,9 @@
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "8.0.6",
-    "webpack": "4.39.3",
-    "webpack-cli": "3.3.2",
-    "webpack-dev-middleware": "3.7.0",
-    "webpack-dev-server": "3.8.0"
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-middleware": "^6.1.1",
+    "webpack-dev-server": "^4.15.1"
   }
 }

examples/kitchen-sink/src/server.tsx → examples/kitchen-sink/server.tsx

@@ -1,11 +1,12 @@
-import Webpack from "webpack"
-import WebpackDevServer from "webpack-dev-server"
-import webpackConfig from "../webpack.config"
 import express from "express"
 import ReactDOMServer from "react-dom/server"
 import React from "react"
 import chalk from "chalk"
 
+import webpack from "webpack"
+import webpackDevMiddleware from "webpack-dev-middleware"
+import webpackConfig from "./webpack.config"
+
 import { findDevice } from "@artsy/detect-responsive-traits"
 
 import {
@@ -15,11 +16,20 @@ import {
   MediaContextProvider,
   SortedBreakpoints,
   SSRStyleID,
-} from "./Media"
-import { App } from "./app"
+} from "./src/Media"
+import { App } from "./src/App"
 
+const compiler = webpack(webpackConfig)
 const app = express()
 
+app.use(
+  webpackDevMiddleware(compiler, {
+    publicPath: webpackConfig.output.publicPath,
+    serverSideRender: true,
+    stats: "errors-only",
+  })
+)
+
 /**
  * Find the breakpoints and interactions that the server should render
  */
@@ -94,7 +104,7 @@ app.get("/rehydration", (req, res) => {
           // loading the JS bundle.
           setTimeout(function () {
             var script = document.createElement("script")
-            script.src = "/bundle.js"
+            script.src = "/assets/app.js"
             document.getElementsByTagName("head")[0].appendChild(script);
             document.getElementById("loading-indicator").remove();
           }, 1000)
@@ -116,7 +126,7 @@ app.get("/client-only", (_req, res) => {
         <script>
           setTimeout(function () {
             var script = document.createElement("script")
-            script.src = "/bundle.js"
+            script.src = "/assets/app.js"
             document.getElementsByTagName("head")[0].appendChild(script);
           }, 1000)
         </script>
@@ -176,18 +186,6 @@ function log(userAgent: string, onlyMatch?: string[], device?: string) {
   )
 }
 
-const compiler = Webpack(webpackConfig)
-const devServerOptions = Object.assign({}, webpackConfig.devServer, {
-  stats: {
-    colors: true,
-  },
-  before(s) {
-    s.use(app)
-  },
-})
-const server = new WebpackDevServer(compiler, devServerOptions)
-
-server.listen(8080, "127.0.0.1", () => {
-  // tslint:disable-next-line:no-console
-  console.log("Starting server on http://localhost:8080")
+app.listen(3000, () => {
+  console.warn("\nApp started at http://localhost:3000 \n")
 })

examples/kitchen-sink/tsconfig.json

@@ -5,7 +5,6 @@
     "declaration": true,
     "experimentalDecorators": true,
     "jsx": "react",
-    "keyofStringsOnly": true,
     "lib": ["dom", "es2015", "es2016", "es2017"],
     "module": "commonjs",
     "moduleResolution": "node",
@@ -14,7 +13,6 @@
     "noUnusedParameters": true,
     "outDir": "dist",
     "resolveJsonModule": true,
-    "rootDir": "src",
     "skipLibCheck": true,
     "target": "es2015",
     "strict": true

examples/kitchen-sink/webpack.config.js

@@ -0,0 +1,29 @@
+const webpack = require("webpack")
+
+module.exports = {
+  mode: "development",
+  devtool: "eval",
+  entry: {
+    app: "./src/client.tsx",
+  },
+  output: {
+    filename: "[name].js",
+    publicPath: "/assets",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/,
+        include: /src/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
+    ],
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+  resolve: {
+    extensions: [".js", ".jsx", ".ts", ".tsx"],
+    modules: ["node_modules", "src"],
+  },
+}