init

2022-09-23 16:43:30 +07:00
commit 9f3a623c73
48 changed files with 13494 additions and 0 deletions
--- a/packages/remote-svelte/.babelrc
+++ b/packages/remote-svelte/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}
--- a/packages/remote-svelte/package.json
+++ b/packages/remote-svelte/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "remote-svelte",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.19.1",
+    "babel-loader": "^8.2.5",
+    "css-loader": "^6.7.1",
+    "dotenv-webpack": "^8.0.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "svelte-check": "^2.9.0",
+    "svelte-loader": "^3.1.3",
+    "svelte-preprocess": "^4.10.7",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1"
+  },
+  "dependencies": {
+    "svelte": "^3.50.1"
+  },
+  "scripts": {
+    "serve": "http-server ./dist/ --cors -o -c-1 --proxy",
+    "build": "webpack --mode production",
+    "start": "webpack serve --open chrome"
+  }
+}
--- a/packages/remote-svelte/src/App.svelte
+++ b/packages/remote-svelte/src/App.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import {store, increment, decrement, useSvelteSelector} from 'store/store'; 
+
+  $: counter =  useSvelteSelector((state)=> state.counter.value,  newCounter => (counter = newCounter));
+
+  function incrementCount() {
+    store.dispatch(increment())
+		
+	}
+
+  function decrementCount() {
+		 store.dispatch(decrement())
+	}
+</script>
+
+<style>
+  .container{
+    display: flex;
+    font-size: 3rem;
+    margin: auto;
+    max-width: 800px;
+    margin-top: 20px;
+    font-family: Arial, Helvetica, sans-serif;
+  }
+
+
+</style>
+
+<div class="container">
+  <div> Svelt Counter:{counter}</div>
+  <button on:click={incrementCount}>+</button>
+  <button  on:click={decrementCount}>-</button>
+</div>
--- a/packages/remote-svelte/src/index.html
+++ b/packages/remote-svelte/src/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <!--This is the node that svelte is going to take to make the magic-->
+  <div id="root"></div>
+</body>
+</html>
--- a/packages/remote-svelte/src/index.js
+++ b/packages/remote-svelte/src/index.js
@@ -0,0 +1,7 @@
+import App from "./App.svelte";
+
+// const app = new App({
+//   target: document.getElementById("root"), // entry point in ../public/index.html
+// });
+
+export default App;
--- a/packages/remote-svelte/webpack.config.js
+++ b/packages/remote-svelte/webpack.config.js
@@ -0,0 +1,87 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const Dotenv = require("dotenv-webpack");
+const sveltePreprocess = require("svelte-preprocess");
+const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
+
+const deps = require("./package.json").dependencies;
+
+module.exports = {
+  // This says to webpack that we are in development mode and write the code in webpack file in different way
+  mode: "development",
+  //Our index file
+  entry: "./src/index.js",
+  //Where we put the production code
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "bundle.js",
+    publicPath: "http://localhost:3001/",
+  },
+  module: {
+    rules: [
+      //Allows use of modern javascript
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/, //don't test node_modules folder
+        use: {
+          loader: "babel-loader",
+        },
+      },
+      //Allows use of svelte
+      {
+        test: /\.svelte$/,
+        use: {
+          loader: "svelte-loader",
+          options: {
+            preprocess: sveltePreprocess({}),
+          },
+        },
+      },
+      //Allows use of CSS
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      //Allows use of images
+      {
+        test: /\.(jpg|jpeg|png|svg)$/,
+        use: "file-loader",
+      },
+    ],
+  },
+  //this is what enables users to leave off the extension when importing
+  resolve: {
+    extensions: [".mjs", ".js", ".svelte"],
+  },
+  plugins: [
+    //Allows to create an index.html in our build folder
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "src/index.html"),
+    }),
+    //This gets all our css and put in a unique file
+    new MiniCssExtractPlugin(),
+    //take our environment variable in .env file
+    //And it does a text replace in the resulting bundle for any instances of process.env.
+    new Dotenv(),
+    new ModuleFederationPlugin({
+      name: "remoteSvelte",
+      filename: "remoteEntry.js",
+      remotes: {
+        store: "store@http://localhost:7070/remoteEntry.js",
+      },
+      exposes: {
+        "./Counter": "./src/index.js",
+      },
+      shared: {
+        ...deps,
+      },
+    }),
+  ],
+  ////Config for webpack-dev-server module
+  devServer: {
+    historyApiFallback: true,
+    hot: true,
+    port: 3001,
+  },
+};
--- a/packages/remote-svelte/yarn-error.log
+++ b/packages/remote-svelte/yarn-error.log
@@ -0,0 +1,59 @@
+Arguments: 
+  C:\Program Files\nodejs\node.exe C:\Users\Thary\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js dev
+
+PATH: 
+  C:\Users\Thary\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\Thary\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\Git\cmd;C:\xampp\php;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\Dart\dart-sdk\bin;C:\apache-maven\bin;C:\Program Files\PuTTY;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\Kubernetes\Minikube;C:\minikube;C:\Program Files\nodejs;D:\software\kompose;C:\Program Files\MySQL\MySQL Shell 8.0\bin;C:\Users\Thary\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Microsoft VS Code\bin;C:\Program Files\heroku\bin;C:\flutter\bin;C:\Users\Thary\AppData\Local\Android\Sdk\platform-tools;C:\Users\Thary\AppData\Local\Android\Sdk\tools;C:\Users\Thary\AppData\Local\Android\Sdk\tools\bin;C:\Users\Thary\.dotnet\tools;C:\Users\Thary\AppData\Local\Programs\Python\Python39;C:\Users\Thary\AppData\Local\Programs\Python\Python39\Scripts;C:\Users\Thary\AppData\Local\Microsoft\WindowsApps;C:\Program Files\PostgreSQL\12\bin;D:\flutter\flutter_windows_3.3.1-stable\bin;C:\Users\Thary\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\JetBrains\IntelliJ IDEA 2022.1\bin;C:\Program Files\Git\mingw64\bin;C:\Users\Thary\AppData\Roaming\npm;D:\web\kompose.exe;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
+
+Yarn version: 
+  1.22.19
+
+Node version: 
+  16.17.0
+
+Platform: 
+  win32 x64
+
+Trace: 
+  SyntaxError: D:\web\test-mfe\packages\remote-svelte\package.json: Unexpected token } in JSON at position 752
+      at JSON.parse (<anonymous>)
+      at C:\Users\Thary\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:1629:59
+      at Generator.next (<anonymous>)
+      at step (C:\Users\Thary\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:310:30)
+      at C:\Users\Thary\AppData\Roaming\npm\node_modules\yarn\lib\cli.js:321:13
+
+npm manifest: 
+  {
+    "name": "remote-svelte",
+    "version": "1.0.0",
+    "main": "index.js",
+    "license": "MIT",
+    "devDependencies": {
+      "@babel/core": "^7.19.1",
+      "@babel/polyfill": "^7.12.1",
+      "@babel/preset-env": "^7.19.1",
+      "babel-loader": "^8.2.5",
+      "css-loader": "^6.7.1",
+      "dotenv-webpack": "^8.0.1",
+      "file-loader": "^6.2.0",
+      "html-webpack-plugin": "^5.5.0",
+      "mini-css-extract-plugin": "^2.6.1",
+      "svelte-loader": "^3.1.3",
+      "webpack": "^5.74.0",
+      "webpack-cli": "^4.10.0",
+      "webpack-dev-server": "^4.11.1"
+    },
+    "dependencies": {
+      "svelte": "^3.50.1"
+    },
+    "scripts": {
+      "start": "http-server ./dist/ --cors -o -c-1 --proxy",
+      "build": "webpack --mode production",
+      "dev": "webpack serve --open chrome"
+    },
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile