Merge pull request #81 from tommy351/web-playground

Playground

examples/typescript/README.md

@@ -11,3 +11,5 @@ require = ["ts-node/register"]
 ## Environment Types
 
 You can specify types of environment variables by extending type declarations of `@kosko/env` module. See [environments](environments) folder for example.
+
+See [docs](https://kosko.dev/docs/typescript-support) for more details.

examples/web-parcel-1/README.md

@@ -1,3 +1,5 @@
 # Parcel 1 Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-parcel-1)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-parcel-1)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.

examples/web-static/README.md

@@ -1,3 +1,5 @@
 # Static Site Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-static)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-static)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.

examples/web-sync-environment/README.md

@@ -0,0 +1,5 @@
+# Sync Environment Example
+
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-sync-environment)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.

examples/web-sync-environment/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@kosko-example/web-sync-environment",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "webpack serve",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@kosko/env": "^2.0.0",
+    "@kosko/generate": "^1.2.0",
+    "kubernetes-models": "^1.5.2"
+  },
+  "devDependencies": {
+    "html-webpack-plugin": "^5.3.1",
+    "webpack": "^5.31.0",
+    "webpack-cli": "^4.6.0",
+    "webpack-dev-server": "^3.11.2"
+  }
+}

examples/web-sync-environment/sandbox.config.json

@@ -0,0 +1,5 @@
+{
+  "template": "node",
+  "view": "browser",
+  "node": 14
+}

examples/web-sync-environment/src/components/nginx.js

@@ -0,0 +1,51 @@
+import { Deployment } from "kubernetes-models/apps/v1/Deployment";
+import { Service } from "kubernetes-models/v1/Service";
+import env from "../env";
+
+const params = env.component("nginx");
+const metadata = { name: "nginx" };
+const labels = { app: "nginx" };
+
+const deployment = new Deployment({
+  metadata,
+  spec: {
+    replicas: params.replicas,
+    selector: {
+      matchLabels: labels
+    },
+    template: {
+      metadata: {
+        labels
+      },
+      spec: {
+        containers: [
+          {
+            image: `${params.imageRegistry}/nginx:${params.imageTag}`,
+            name: "nginx",
+            ports: [
+              {
+                containerPort: 80
+              }
+            ]
+          }
+        ]
+      }
+    }
+  }
+});
+
+const service = new Service({
+  metadata,
+  spec: {
+    selector: labels,
+    type: "ClusterIP",
+    ports: [
+      {
+        port: 80,
+        targetPort: 80
+      }
+    ]
+  }
+});
+
+export default [deployment, service];

examples/web-sync-environment/src/env.js

@@ -0,0 +1,14 @@
+import { createSyncEnvironment, createSyncLoaderReducers } from "@kosko/env";
+
+const env = createSyncEnvironment();
+const dev = require.context("./environments/dev");
+
+env.setReducers((reducers) => [
+  ...reducers,
+  ...createSyncLoaderReducers({
+    global: () => dev("./index").default,
+    component: (name) => dev(`./${name}`).default
+  })
+]);
+
+export default env;

examples/web-sync-environment/src/environments/dev/index.js

@@ -0,0 +1,3 @@
+export default {
+  imageRegistry: "gcr.io/image-dev"
+};

examples/web-sync-environment/src/environments/dev/nginx.js

@@ -0,0 +1,4 @@
+export default {
+  replicas: 1,
+  imageTag: "latest"
+};

examples/web-sync-environment/src/index.js

@@ -0,0 +1,25 @@
+/* eslint-env browser */
+import { resolve, print, PrintFormat } from "@kosko/generate";
+
+(async () => {
+  const manifests = await resolve(
+    import("./components/nginx").then((mod) => mod.default)
+  );
+
+  console.log(manifests);
+
+  const element = document.createElement("pre");
+  document.body.appendChild(element);
+
+  print(
+    { manifests },
+    {
+      format: PrintFormat.YAML,
+      writer: {
+        write: (data) => {
+          element.innerText += data;
+        }
+      }
+    }
+  );
+})();

examples/web-sync-environment/webpack.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable node/no-unpublished-require */
+"use strict";
+
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+
+module.exports = {
+  mode: "development",
+  entry: {
+    index: "./src/index.js"
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js"
+  },
+  plugins: [new HtmlWebpackPlugin()]
+};

examples/web-webpack-5/README.md

@@ -1,3 +1,5 @@
 # Webpack 5 Example
 
-[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/tommy351/kosko/tree/master/examples/web-webpack-5)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/tommy351/kosko/tree/master/examples/web-webpack-5)
+
+See [docs](https://kosko.dev/docs/using-in-browser) for more details.

netlify.toml

@@ -38,3 +38,8 @@
 [[redirects]]
   from = "/api"
   to = "/docs/api"
+
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    cache-control = "public, max-age=604800, immutable"