Skip to content

Commit f221038

Browse files
baltazarparrabaltazarparra
committed
--no-edit
1 parent 5ac7033 commit f221038

File tree

11 files changed

+6222
-2
lines changed

11 files changed

+6222
-2
lines changed

‎growlers/src/components/BeverageCard.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import { SimpleGrid, Progress, Text, Button, Box } from "@chakra-ui/react";
33

44
import { Beverage } from "../types";
5+
import { addToCart } from '../store'
56

67
const BeverageCard = ({ beverage }: { beverage: Beverage }) => (
78
<SimpleGrid
@@ -41,7 +42,7 @@ const BeverageCard = ({ beverage }: { beverage: Beverage }) => (
4142
</Text>
4243
<Progress hasStripe value={beverage.level} mt={3} />
4344
<Box mt={3} align="right">
44-
<Button>Add To Cart</Button>
45+
<Button onClick={() => addToCart(beverage)}>Add To Cart</Button>
4546
</Box>
4647
</div>
4748
</SimpleGrid>

‎growlers/src/components/Cart.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React from "react";
22
import { Box, Button, Text } from "@chakra-ui/react";
3+
import { useProxy } from 'valtio'
34

45
import { MFE_BORDER } from "../constants";
6+
import store from '../store'
57

68
const Cart = () => {
9+
const { cart } = useProxy(store)
10+
711
return (
812
<Box border={MFE_BORDER}>
9-
{[].map((beverage) => (
13+
{cart.map((beverage) => (
1014
<Box
1115
borderBottom="1px"
1216
borderBottomColor="gray.200"

‎host-react/.babelrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"presets": ["@babel/preset-typescript", "@babel/preset-react", "@babel/preset-env"],
3+
"plugins": [
4+
["@babel/transform-runtime"]
5+
]
6+
}

‎host-react/.gitignore

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# Snowpack dependency directory (https://snowpack.dev/)
45+
web_modules/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
.parcel-cache
78+
79+
# Next.js build output
80+
.next
81+
out
82+
83+
# Nuxt.js build / generate output
84+
.nuxt
85+
dist
86+
87+
# Gatsby files
88+
.cache/
89+
# Comment in the public line in if your project uses Gatsby and not Next.js
90+
# https://nextjs.org/blog/next-9-1#public-directory-support
91+
# public
92+
93+
# vuepress build output
94+
.vuepress/dist
95+
96+
# Serverless directories
97+
.serverless/
98+
99+
# FuseBox cache
100+
.fusebox/
101+
102+
# DynamoDB Local files
103+
.dynamodb/
104+
105+
# TernJS port file
106+
.tern-port
107+
108+
# Stores VSCode versions used for testing VSCode extensions
109+
.vscode-test
110+
111+
# yarn v2
112+
.yarn/cache
113+
.yarn/unplugged
114+
.yarn/build-state.yml
115+
.yarn/install-state.gz
116+
.pnp.*

‎host-react/package.json

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "wp5-starter-react-ts",
3+
"version": "1.0.0",
4+
"scripts": {
5+
"build": "webpack --mode production",
6+
"build:dev": "webpack --mode development",
7+
"start": "webpack-dev-server --open --mode development",
8+
"start:live": "webpack-dev-server --open --mode development --liveReload"
9+
},
10+
"license": "MIT",
11+
"author": {
12+
"name": "Jack Herrington",
13+
"email": "jherr@pobox.com"
14+
},
15+
"devDependencies": {
16+
"@babel/core": "7.9.6",
17+
"@babel/plugin-transform-runtime": "^7.12.10",
18+
"@babel/preset-env": "^7.10.3",
19+
"@babel/preset-react": "7.9.4",
20+
"@babel/preset-typescript": "^7.10.4",
21+
"@types/react": "^16.9.46",
22+
"@types/react-dom": "^16.9.8",
23+
"babel-loader": "^8.2.2",
24+
"css-loader": "^3.5.3",
25+
"html-webpack-plugin": "^4.5.0",
26+
"style-loader": "^2.0.0",
27+
"webpack": "^5.10.1",
28+
"webpack-cli": "3.3.11",
29+
"webpack-dev-server": "3.11.0"
30+
},
31+
"dependencies": {
32+
"@chakra-ui/react": "^1.1.2",
33+
"@emotion/react": "^11.1.4",
34+
"@emotion/styled": "^11.0.0",
35+
"framer-motion": "^3.1.4",
36+
"react": "^16.13.0",
37+
"react-dom": "^16.13.0"
38+
}
39+
}

‎host-react/src/App.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
4+
import "./index.css";
5+
6+
const App = () => <div>Hi there, I'm React from Webpack 5.</div>;
7+
8+
ReactDOM.render(<App />, document.getElementById("app"));

‎host-react/src/index.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
}

‎host-react/src/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
10+
<body>
11+
<div id="app"></div>
12+
</body>
13+
14+
</html>

‎host-react/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import("./App");

‎host-react/webpack.config.js

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const HtmlWebPackPlugin = require("html-webpack-plugin");
2+
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3+
4+
const deps = require("./package.json").dependencies;
5+
module.exports = {
6+
output: {
7+
publicPath: "http://localhost:8080/",
8+
},
9+
10+
resolve: {
11+
extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
12+
},
13+
14+
devServer: {
15+
port: 8080,
16+
},
17+
18+
module: {
19+
rules: [
20+
{
21+
test: /\.m?js/,
22+
type: "javascript/auto",
23+
resolve: {
24+
fullySpecified: false,
25+
},
26+
},
27+
{
28+
test: /\.css$/i,
29+
use: ["style-loader", "css-loader"],
30+
},
31+
{
32+
test: /\.(ts|tsx|js|jsx)$/,
33+
exclude: /node_modules/,
34+
use: {
35+
loader: "babel-loader",
36+
},
37+
},
38+
],
39+
},
40+
41+
plugins: [
42+
new ModuleFederationPlugin({
43+
name: "starter",
44+
filename: "remoteEntry.js",
45+
remotes: {},
46+
exposes: {},
47+
shared: {
48+
...deps,
49+
react: {
50+
singleton: true,
51+
requiredVersion: deps.react,
52+
},
53+
"react-dom": {
54+
singleton: true,
55+
requiredVersion: deps["react-dom"],
56+
},
57+
},
58+
}),
59+
new HtmlWebPackPlugin({
60+
template: "./src/index.html",
61+
}),
62+
],
63+
};

0 commit comments

Comments
 (0)