Merge pull request #45 from ConnorJamesLow/feature/webpack-example

added webpack example

examples/webpack-ts-project/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "webpack-ts-project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "watch": "webpack --watch",
+    "start": "webpack serve --open"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.3",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.3",
+    "typescript": "^5.1.3",
+    "webpack": "^5.86.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  },
+  "dependencies": {
+    "texsaur": "file:../../package"
+  }
+}

examples/webpack-ts-project/src/counter.tsx

@@ -0,0 +1,13 @@
+export const Counter: JSX.Component = () => {
+    let clicks = 0;
+    const getMessage = () => `I have been clicked ${clicks} time${clicks++ === 1 ? '' : 's'}.`;
+
+    let display = <span>{getMessage()}</span>;
+    return (
+        <div class="counter">
+            <button onclick={() => display.innerHTML = getMessage()}>
+                {display}
+            </button>
+        </div>
+    );
+}

examples/webpack-ts-project/src/example.tsx

@@ -0,0 +1,27 @@
+import { Counter } from './counter';
+import svgTest from './svg-test';
+
+interface ExampleProps {
+    onClick(ev: MouseEvent): any
+}
+
+const Example: JSX.Component<ExampleProps> = ({ onClick }, children) => (
+    <div class="example" onclick={onClick} aria-label="Example">{children}</div>
+);
+
+
+const div = <div>Hello there.</div> as HTMLElement;
+const spanElement = <span>Hello from inside the Example component!</span>;
+const content = <>
+    {div}
+    <Example onClick={() => alert('clicked!')}>
+        {spanElement}
+    </Example>
+    <Example onClick={() => console.log(svgTest)}>
+        {svgTest}
+    </Example>
+    <Counter />
+</> as any as HTMLElement[];
+
+
+export default <main>{content}</main>;

examples/webpack-ts-project/src/index.ts

@@ -0,0 +1,4 @@
+import { content } from "./page";
+console.log('hello there');
+
+document.body.appendChild(content);

examples/webpack-ts-project/src/page.tsx

@@ -0,0 +1,2 @@
+import './style.css';
+export { default as content } from './example';

examples/webpack-ts-project/src/style.css

@@ -0,0 +1,22 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 16px;
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+}
+
+main {
+  display: block;
+  margin: auto;
+  max-width: 600px;
+  padding: 2rem;
+}
+
+.example {
+  background: lightblue;
+  cursor: pointer;
+  padding: 1rem;
+}

examples/webpack-ts-project/src/svg-test.tsx

@@ -0,0 +1,26 @@
+export default <>
+    <svg viewBox="0 -20 100 50">
+        <switch>
+            <text systemLanguage="ar">مرحبا</text>
+            <text systemLanguage="de,nl">Hallo!</text>
+            <text systemLanguage="en-us">Howdy!</text>
+            <text systemLanguage="en-gb">Wotcha!</text>
+            <text systemLanguage="en-au">G'day!</text>
+            <text systemLanguage="en">Hello!</text>
+            <text systemLanguage="es">Hola!</text>
+            <text systemLanguage="fr">Bonjour!</text>
+            <text systemLanguage="ja">こんにちは</text>
+            <text systemLanguage="ru">Привет!</text>
+            <text>☺</text>
+        </switch>
+    </svg>
+
+    <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey">
+        <circle cx="50" cy="50" r="40" />
+        <circle cx="150" cy="50" r="4" />
+
+        <svg viewBox="0 0 10 10" x="200" width="100">
+            <circle cx="5" cy="5" r="4" />
+        </svg>
+    </svg>
+</>;

examples/webpack-ts-project/src/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="texsaur" />

examples/webpack-ts-project/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "node16",
+    "strict": true,
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "texsaur"
+  },
+  "include": ["src"]
+}

examples/webpack-ts-project/webpack.config.js

@@ -0,0 +1,50 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        static: './dist',
+    },
+    entry: "./src/index.ts",
+    output: {
+        filename: "bundle.js",
+        path: path.resolve(__dirname, 'dist'),
+        clean: true,
+    },
+    resolve: {
+        // Add `.ts` and `.tsx` as a resolvable extension.
+        extensions: [".ts", ".tsx", ".js"],
+        // Add support for TypeScripts fully qualified ESM imports.
+        extensionAlias: {
+            ".js": [".js", ".ts"],
+        }
+    },
+    module: {
+        rules: [
+            // all files with a `.ts`, `.cts`, `.mts` or `.tsx` extension will be handled by `ts-loader`
+            {
+                test: /tsx?$/,
+                loader: "ts-loader"
+            },
+            {
+                test: /\.s?css$/,
+                use: [
+                    { loader: "style-loader", options: { injectType: "styleTag" } },
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            url: false
+                        }
+                    }
+                ]
+            },
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            title: 'Development',
+        }),
+    ],
+};