starting on webshare website

.gitignore

@@ -11,3 +11,5 @@ local-server-bin
 *.pw
 build/
 *.dmg
+webshare/dist/
+webshare/dist-dev/

scripthaus.md

@@ -43,6 +43,12 @@ PROMPT_DEV=1 PCLOUD_ENDPOINT="https://ot2e112zx5.execute-api.us-west-2.amazonaws
 node_modules/.bin/webpack-dev-server --config webpack.dev.js --host 0.0.0.0
 ```
 
+```bash
+# @scripthaus command webshare-devserver
+# @scripthaus cd :playbook
+node_modules/.bin/webpack-dev-server --config webpack.share.dev.js --host 127.0.0.1
+```
+
 ```bash
 # @scripthaus command typecheck
 # @scripthaus cd :playbook

src/sh2.less

@@ -3171,3 +3171,11 @@ input[type=checkbox] {
     animation-name: fade-in-out;
     animation-duration: 0.3s;
 }
+
+body.prompt-webshare {
+    color: white;
+    
+    #app {
+        color: white;
+    }
+}

src/webshare-elems.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as mobxReact from "mobx-react";
+import * as mobx from "mobx";
+import {sprintf} from "sprintf-js";
+import {boundMethod} from "autobind-decorator";
+import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
+import cn from "classnames";
+
+class WebShareMain extends React.Component<{}, {}> {
+    render() {
+        return (
+            <h1>hello from webshare</h1>
+        );
+    }
+}
+
+export {WebShareMain};

src/webshare.ts

@@ -0,0 +1,15 @@
+import * as mobx from "mobx";
+import * as React from "react";
+import {createRoot} from 'react-dom/client';
+import {sprintf} from "sprintf-js";
+import {WebShareMain} from "./webshare-elems";
+
+document.addEventListener("DOMContentLoaded", () => {
+    let elem = document.getElementById("app");
+    let root = createRoot(elem);
+    let reactElem = React.createElement(WebShareMain, null, null);
+    root.render(reactElem);
+});
+
+(window as any).mobx = mobx;
+(window as any).sprintf = sprintf;

webpack.share.dev.js

@@ -0,0 +1,37 @@
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const common = require('./webpack.share.js');
+const path = require('path');
+const CopyPlugin = require("copy-webpack-plugin");
+const VERSION = require("./version.js");
+
+var merged = merge.merge(common, {
+    mode: "development",
+    output: {
+        path: path.resolve(__dirname, "webshare/dist-dev"),
+        filename: "[name].js",
+    },
+    devtool: "source-map",
+    devServer: {
+        static: {
+            directory: path.join(__dirname, "./webshare"),
+        },
+        port: 9001,
+        headers: {
+            'Cache-Control': 'no-store',
+        },
+    },
+    watchOptions: {
+        aggregateTimeout: 200,
+    },
+});
+
+var definePlugin = new webpack.DefinePlugin({
+    __PROMPT_DEV__: "true",
+    __PROMPT_VERSION__: JSON.stringify(VERSION),
+    __PROMPT_BUILD__: JSON.stringify("devbuild"),
+});
+merged.plugins.push(definePlugin);
+
+module.exports = merged;
+

webpack.share.js

@@ -0,0 +1,67 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
+const path = require("path");
+
+module.exports = {
+    mode: "development",
+    entry: {
+        webshare: ["./src/webshare.ts", "./src/sh2.less"],
+    },
+    output: {
+        path: path.resolve(__dirname, "webshare/dist"),
+        filename: "[name].js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                // exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: [
+                            [
+                                "@babel/preset-env",
+                                {
+                                    targets: "defaults and not ie > 0 and not op_mini all and not op_mob > 0 and not kaios > 0 and not and_qq > 0 and not and_uc > 0 and not baidu > 0",
+                                },
+                            ],
+                            "@babel/preset-react",
+                            "@babel/preset-typescript"],
+                        plugins: [
+                            ["@babel/transform-runtime", {"regenerator": true}],
+                            "@babel/plugin-transform-react-jsx",
+                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
+                            ["@babel/plugin-proposal-class-properties", { "loose": true }],
+                            ["@babel/plugin-proposal-private-methods", { "loose": true }],
+                            ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+                            "babel-plugin-jsx-control-statements",
+                        ],
+                    },
+                },
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    "style-loader",
+                    "css-loader",
+                ],
+            },
+            {
+                test: /\.less$/,
+                use: [
+                    {loader: MiniCssExtractPlugin.loader},
+                    "css-loader",
+                    "less-loader"
+                ]
+            },
+        ]
+    },
+    plugins: [
+        new MiniCssExtractPlugin({filename: "[name].css", ignoreOrder: true}),
+        new LodashModuleReplacementPlugin(),
+    ],
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js', '.mjs', '.cjs', '.wasm', '.json', '.less', '.css']
+    },
+};

webshare/static/fontawesome/css/sharp-regular.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-regular:normal 400 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-sharp-regular-400.woff2) format("woff2"),url(../webfonts/fa-sharp-regular-400.ttf) format("truetype")}.fa-regular,.fasr{font-weight:400}

webshare/static/fontawesome/css/sharp-solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-sharp:"Font Awesome 6 Sharp";--fa-font-sharp-solid:normal 900 1em/1 "Font Awesome 6 Sharp"}@font-face{font-family:"Font Awesome 6 Sharp";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-sharp-solid-900.woff2) format("woff2"),url(../webfonts/fa-sharp-solid-900.ttf) format("truetype")}.fa-solid,.fass{font-weight:900}

webshare/static/fontawesome/css/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license (Commercial License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Pro";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Pro"}@font-face{font-family:"Font Awesome 6 Pro";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

webshare/static/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <base href="../">
+    <script charset="UTF-8" src="/webshare.js"></script>
+    <link rel="stylesheet" href="/static/bulma-0.9.4.min.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/brands.min.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/sharp-solid.min.css">
+    <link rel="stylesheet" href="/static/fontawesome/css/sharp-regular.min.css">
+    <link rel="stylesheet" href="/static/xterm.css" />
+    <link rel="stylesheet" href="/webshare.css" />
+  </head>
+  <body class="prompt-webshare">
+    <div id="measure"></div>
+    <div id="app"></div>
+  </body>
+</html>
+
+

webshare/static/xterm.css

@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+.xterm {
+    cursor: text;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: #000;
+    color: #FFF;
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: #000;
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer,
+.xterm .xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10;
+    color: transparent;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline-1 { text-decoration: underline; }
+.xterm-underline-2 { text-decoration: double underline; }
+.xterm-underline-3 { text-decoration: wavy underline; }
+.xterm-underline-4 { text-decoration: dotted underline; }
+.xterm-underline-5 { text-decoration: dashed underline; }
+
+.xterm-strikethrough {
+    text-decoration: line-through;
+}
+
+.xterm-screen .xterm-decoration-container .xterm-decoration {
+	z-index: 6;
+	position: absolute;
+}
+
+.xterm-decoration-overview-ruler {
+    z-index: 7;
+    position: absolute;
+    top: 0;
+    right: 0;
+    pointer-events: none;
+}
+
+.xterm-decoration-top {
+    z-index: 2;
+    position: relative;
+}