@surplus/create-surplus-app 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +6 -0
  2. package/package.json +1 -1
  3. package/template/esbuild.mjs +2 -3
  4. package/template/package.json +1 -1
  5. package/template/src/app.jsx +2 -25
  6. package/template/src/components/Calculator.css +6 -0
  7. package/template/src/components/Calculator.jsx +32 -0
  8. package/template/src/{styles.css → global.css} +7 -0
  9. package/template/src/index.html +1 -1
package/README.md CHANGED
@@ -7,6 +7,12 @@ hosts the `create-surplus-app` binary.
7
7
  $ npx create-surplus-app --help
8
8
  ```
9
9
 
10
+ > [!TIP]
11
+ > The Surplus ecosystem, in its current incarnation, is rather young, but serious.
12
+ > If you happen to try out any part of the ecosystem (including `create-surplus-app`)
13
+ > and you're turned off by lack of some feature or nicety, please open an issue -
14
+ > I want to know about it, even if it's just an issue title.
15
+
10
16
  # License
11
17
 
12
18
  Copyright © 2026, Joshua Lee Junon. Released under the [MIT License](LICENSE.txt).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@surplus/create-surplus-app",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "npx create-surplus-app - create a Surplus application in seconds",
5
5
  "bin": {
6
6
  "create-surplus-app": "./cli.mjs"
package/template/esbuild.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import esbuild from "esbuild";
2
- import surplus from "@surplus/esbuild";
2
+ import { surplus, surplusCss } from "@surplus/esbuild";
3
3
  import fsp from "node:fs/promises";
4
4
 
5
5
  const isProduction = process.env.NODE_ENV === "production";
@@ -11,9 +11,8 @@ await esbuild.build({
11
11
  minify: isProduction,
12
12
  sourcemap: !isProduction,
13
13
  outfile: "pkg/app.js",
14
- plugins: [surplus()],
14
+ plugins: [surplus(), surplusCss()],
15
15
  });
16
16
 
17
17
  // Copy static files
18
18
  await fsp.copyFile("src/index.html", "pkg/index.html");
19
- await fsp.copyFile("src/styles.css", "pkg/styles.css");
package/template/package.json CHANGED
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "devDependencies": {
13
13
  "@surplus/s": "^1.2.0",
14
- "@surplus/esbuild": "^1.2.1",
14
+ "@surplus/esbuild": "^2.0.1",
15
15
  "@surplus/css": "^0.1.0",
16
16
  "@surplus/types": "^0.1.3",
17
17
  "esbuild": "^0.27.2",
package/template/src/app.jsx CHANGED
@@ -1,31 +1,8 @@
1
1
  import S from "@surplus/s";
2
2
 
3
- const Calculator = () => {
4
- const formula = S.data("2 * (2 * 2 + 2) * 2 * 2 - 2 * 2 - 2");
5
- const calculation = S(() => {
6
- const f = formula();
7
- if (!f) return 0;
8
- if (/[^0-9+\-*/(). ]/.test(f)) return false;
9
- // eslint-disable-next-line no-eval
10
- return eval(f);
11
- });
3
+ import "./global.css";
12
4
 
13
- let input;
14
- return (
15
- <div class="calculator">
16
- <label for="formula">Enter a formula:</label>
17
- <input
18
- type="text"
19
- value={S.sample(formula)}
20
- ref={input}
21
- on:input={() => formula(input.value)}
22
- />
23
- <span class="result">
24
- = {calculation() !== false ? calculation() : undefined}
25
- </span>
26
- </div>
27
- );
28
- };
5
+ import Calculator from "./components/Calculator.jsx";
29
6
 
30
7
  const Root = () => (
31
8
  <div id="root">
package/template/src/components/Calculator.css ADDED
@@ -0,0 +1,6 @@
1
+ .root {
2
+ width: 100%;
3
+ background: #444;
4
+ padding: 0.5rem;
5
+ box-sizing: border-box;
6
+ }
package/template/src/components/Calculator.jsx ADDED
@@ -0,0 +1,32 @@
1
+ import S from "@surplus/s";
2
+
3
+ import * as C from "./Calculator.css";
4
+
5
+ export default () => {
6
+ const formula = S.data("2 * (2 * 2 + 2) * 2 * 2 - 2 * 2 - 2");
7
+ const calculation = S(() => {
8
+ const f = formula();
9
+ if (!f) return 0;
10
+ if (/[^0-9+\-*/(). ]/.test(f)) return false;
11
+ // eslint-disable-next-line no-eval
12
+ return eval(f);
13
+ });
14
+
15
+ let input;
16
+ return (
17
+ <div class={C.root}>
18
+ <label for="formula">Enter a formula:</label>
19
+ <input
20
+ type="text"
21
+ name="formula"
22
+ id="formula"
23
+ value={S.sample(formula)}
24
+ ref={input}
25
+ on:input={() => formula(input.value)}
26
+ />
27
+ <span class={"result" /* @global class, from global.css */}>
28
+ = {calculation() !== false ? calculation() : undefined}
29
+ </span>
30
+ </div>
31
+ );
32
+ };
package/template/src/{styles.css → global.css} RENAMED
@@ -15,3 +15,10 @@ div#root {
15
15
  justify-content: center;
16
16
  align-items: center;
17
17
  }
18
+
19
+ /* To define a global (non-namespaced) class, use @global */
20
+ @global .result {
21
+ font-weight: bold;
22
+ font-family: monospace;
23
+ color: #0f0;
24
+ }
package/template/src/index.html CHANGED
@@ -4,7 +4,7 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>My App</title>
7
- <link rel="stylesheet" href="styles.css" />
7
+ <link rel="stylesheet" href="app.css" />
8
8
  </head>
9
9
  <body>
10
10
  <script type="module" src="app.js"></script>