skilldrop-cli 1.0.1 → 1.1.1

package/packs/frontend/skills/bundle-size-review/evals/files/8/package-lock.json.fixture

@@ -0,0 +1,73 @@
+{
+  "name": "harbourline-web",
+  "version": "3.8.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "harbourline-web",
+      "version": "3.8.0",
+      "dependencies": {
+        "@northwind/datepicker": "^1.4.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.4",
+        "promise-polyfill": "^8.3.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "whatwg-fetch": "^3.6.20"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.25.6",
+      "dependencies": { "regenerator-runtime": "^0.14.0" }
+    },
+    "node_modules/@northwind/datepicker": {
+      "version": "1.4.2",
+      "dependencies": { "date-fns": "^3.6.0" },
+      "peerDependencies": { "react": ">=17" }
+    },
+    "node_modules/@northwind/datepicker/node_modules/date-fns": {
+      "version": "3.6.0"
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "dependencies": { "@babel/runtime": "^7.21.0" }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0"
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }
+    },
+    "node_modules/moment": {
+      "version": "2.29.4"
+    },
+    "node_modules/promise-polyfill": {
+      "version": "8.3.0"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "dependencies": { "loose-envify": "^1.1.0" }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" },
+      "peerDependencies": { "react": "^18.3.1" }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1"
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "dependencies": { "loose-envify": "^1.1.0" }
+    },
+    "node_modules/whatwg-fetch": {
+      "version": "3.6.20"
+    }
+  }
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/package.json.fixture

@@ -0,0 +1,28 @@
+{
+  "name": "harbourline-web",
+  "version": "3.8.0",
+  "private": true,
+  "scripts": {
+    "build": "webpack --mode production",
+    "build:stats": "webpack --mode production --json=dist/stats.json"
+  },
+  "dependencies": {
+    "@northwind/datepicker": "^1.4.2",
+    "date-fns": "^2.30.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "promise-polyfill": "^8.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "whatwg-fetch": "^3.6.20"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "babel-loader": "^9.1.3",
+    "html-webpack-plugin": "^5.6.0",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/app/App.jsx

@@ -0,0 +1,23 @@
+import { lazy, Suspense, useState } from 'react';
+import BookingForm from './BookingForm';
+
+const Reports = lazy(() => import(/* webpackChunkName: "admin" */ './admin/Reports'));
+
+export default function App() {
+  const [view, setView] = useState(window.location.hash === '#admin' ? 'admin' : 'book');
+  return (
+    <main>
+      <nav>
+        <button onClick={() => setView('book')}>Book</button>
+        <button onClick={() => setView('admin')}>Staff reports</button>
+      </nav>
+      {view === 'book' ? (
+        <BookingForm />
+      ) : (
+        <Suspense fallback={<p>Loading reports…</p>}>
+          <Reports />
+        </Suspense>
+      )}
+    </main>
+  );
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/app/BookingForm.jsx

@@ -0,0 +1,18 @@
+import { useMemo, useState } from 'react';
+import { DatePicker } from '@northwind/datepicker';
+import { format, parseISO } from 'date-fns';
+import { debounce } from '../utils/format';
+
+export default function BookingForm() {
+  const [departure, setDeparture] = useState('2027-06-14');
+  const [query, setQuery] = useState('');
+  const search = useMemo(() => debounce((q) => fetch(`/api/cabins?q=${encodeURIComponent(q)}`), 300), []);
+
+  return (
+    <form>
+      <DatePicker value={parseISO(departure)} onChange={(d) => setDeparture(format(d, 'yyyy-MM-dd'))} />
+      <p>Departing {format(parseISO(departure), 'EEEE d MMMM yyyy')}</p>
+      <input value={query} onChange={(e) => { setQuery(e.target.value); search(e.target.value); }} />
+    </form>
+  );
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/app/admin/Reports.jsx

@@ -0,0 +1,17 @@
+import moment from 'moment';
+
+export default function Reports({ rows = [] }) {
+  return (
+    <table>
+      <tbody>
+        {rows.map((r) => (
+          <tr key={r.id}>
+            <td>{r.ship}</td>
+            <td>{moment(r.sailedAt).format('LL')}</td>
+            <td>{moment(r.sailedAt).fromNow()}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/app/index.jsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+createRoot(document.getElementById('root')).render(<App />);

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/landing/Hero.jsx

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { titleCase } from '../utils/format';
+
+export default function Hero() {
+  const [email, setEmail] = useState('');
+  const headline = titleCase('SAIL THE NORTHERN FJORDS THIS SUMMER');
+  return (
+    <section className="hero">
+      <h1>{headline}</h1>
+      <p>Small-ship cruises from Bergen and Tromsø, May to September.</p>
+      <form action="/api/waitlist" method="post">
+        <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <button type="submit">Join the waitlist</button>
+      </form>
+    </section>
+  );
+}

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/landing/index.jsx

@@ -0,0 +1,4 @@
+import { createRoot } from 'react-dom/client';
+import Hero from './Hero';
+
+createRoot(document.getElementById('root')).render(<Hero />);

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/polyfills.js

@@ -0,0 +1,3 @@
+// Added in 2019 when we still had IE11 customers. Keep first so globals exist.
+import 'whatwg-fetch';
+import 'promise-polyfill/src/polyfill';

package/packs/frontend/skills/bundle-size-review/evals/files/8/src/utils/format.js

@@ -0,0 +1,4 @@
+import _ from 'lodash';
+
+export const titleCase = (s) => _.startCase(_.toLower(s));
+export const debounce = (fn, ms) => _.debounce(fn, ms);

package/packs/frontend/skills/bundle-size-review/evals/files/8/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  entry: {
+    app: ['./src/polyfills.js', './src/app/index.jsx'],
+    landing: ['./src/polyfills.js', './src/landing/index.jsx'],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].[contenthash:6].js',
+    publicPath: '/static/',
+  },
+  resolve: { extensions: ['.js', '.jsx'] },
+  module: {
+    rules: [{ test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }],
+  },
+  optimization: {
+    runtimeChunk: 'single',
+    splitChunks: {
+      cacheGroups: {
+        // one cacheable vendor file for everything
+        vendors: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendors',
+          chunks: 'initial',
+        },
+      },
+    },
+  },
+  plugins: [
+    new HtmlWebpackPlugin({ filename: 'index.html', chunks: ['app'] }),
+    new HtmlWebpackPlugin({ filename: 'welcome.html', chunks: ['landing'] }),
+  ],
+};

package/packs/frontend/skills/bundle-size-review/evals/files/9/.github/workflows/size.yml.fixture

@@ -0,0 +1,12 @@
+name: size
+on: [pull_request]
+jobs:
+  size:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with: { node-version: 20 }
+      - run: npm ci
+      - run: npm run build
+      - run: npm run size

package/packs/frontend/skills/bundle-size-review/evals/files/9/build.mjs

@@ -0,0 +1,17 @@
+import { build } from 'esbuild';
+import { writeFileSync } from 'node:fs';
+
+const result = await build({
+  entryPoints: ['src/widget.ts'],
+  bundle: true,
+  splitting: true,
+  format: 'esm',
+  minify: true,
+  target: ['es2020'],
+  outdir: 'dist',
+  jsxFactory: 'h',
+  jsxFragment: 'Fragment',
+  metafile: true,
+});
+
+writeFileSync(process.env.META_OUT ?? 'meta.json', JSON.stringify(result.metafile, null, 2));

package/packs/frontend/skills/bundle-size-review/evals/files/9/meta.main.json

@@ -0,0 +1,100 @@
+{
+  "inputs": {
+    "node_modules/preact/dist/preact.module.js": {
+      "bytes": 11480,
+      "imports": [],
+      "format": "esm"
+    },
+    "node_modules/preact/hooks/dist/hooks.module.js": {
+      "bytes": 3620,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/api.ts": {
+      "bytes": 3960,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/composer.tsx": {
+      "bytes": 6850,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        },
+        {
+          "path": "node_modules/preact/hooks/dist/hooks.module.js",
+          "kind": "import-statement",
+          "original": "preact/hooks"
+        },
+        {
+          "path": "src/api.ts",
+          "kind": "import-statement",
+          "original": "./api"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/styles.ts": {
+      "bytes": 4210,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/widget.ts": {
+      "bytes": 1420,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        },
+        {
+          "path": "src/composer.tsx",
+          "kind": "import-statement",
+          "original": "./composer"
+        },
+        {
+          "path": "src/styles.ts",
+          "kind": "import-statement",
+          "original": "./styles"
+        }
+      ],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/widget.js": {
+      "imports": [],
+      "exports": [],
+      "entryPoint": "src/widget.ts",
+      "inputs": {
+        "src/widget.ts": {
+          "bytesInOutput": 612
+        },
+        "src/composer.tsx": {
+          "bytesInOutput": 3108
+        },
+        "src/api.ts": {
+          "bytesInOutput": 1874
+        },
+        "src/styles.ts": {
+          "bytesInOutput": 3950
+        },
+        "node_modules/preact/dist/preact.module.js": {
+          "bytesInOutput": 10214
+        },
+        "node_modules/preact/hooks/dist/hooks.module.js": {
+          "bytesInOutput": 1436
+        }
+      },
+      "bytes": 21312
+    }
+  }
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/meta.pr412.json

@@ -0,0 +1,196 @@
+{
+  "inputs": {
+    "node_modules/preact/dist/preact.module.js": {
+      "bytes": 11480,
+      "imports": [],
+      "format": "esm"
+    },
+    "node_modules/preact/hooks/dist/hooks.module.js": {
+      "bytes": 3620,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/api.ts": {
+      "bytes": 3960,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/composer.tsx": {
+      "bytes": 7720,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        },
+        {
+          "path": "node_modules/preact/hooks/dist/hooks.module.js",
+          "kind": "import-statement",
+          "original": "preact/hooks"
+        },
+        {
+          "path": "src/api.ts",
+          "kind": "import-statement",
+          "original": "./api"
+        },
+        {
+          "path": "src/emoji/data.ts",
+          "kind": "import-statement",
+          "original": "./emoji/data"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/emoji/data.ts": {
+      "bytes": 690,
+      "imports": [
+        {
+          "path": "src/emoji/emoji-data.json",
+          "kind": "import-statement",
+          "original": "./emoji-data.json"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/emoji/emoji-data.json": {
+      "bytes": 142380,
+      "imports": [],
+      "format": "esm",
+      "with": {}
+    },
+    "src/emoji/picker.tsx": {
+      "bytes": 9140,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        },
+        {
+          "path": "node_modules/preact/hooks/dist/hooks.module.js",
+          "kind": "import-statement",
+          "original": "preact/hooks"
+        },
+        {
+          "path": "src/emoji/data.ts",
+          "kind": "import-statement",
+          "original": "./data"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/styles.ts": {
+      "bytes": 4210,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/widget.ts": {
+      "bytes": 1610,
+      "imports": [
+        {
+          "path": "node_modules/preact/dist/preact.module.js",
+          "kind": "import-statement",
+          "original": "preact"
+        },
+        {
+          "path": "src/composer.tsx",
+          "kind": "import-statement",
+          "original": "./composer"
+        },
+        {
+          "path": "src/styles.ts",
+          "kind": "import-statement",
+          "original": "./styles"
+        },
+        {
+          "path": "src/emoji/picker.tsx",
+          "kind": "dynamic-import",
+          "original": "./emoji/picker"
+        }
+      ],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/widget.js": {
+      "imports": [
+        {
+          "path": "dist/chunk-R4N7QW2L.js",
+          "kind": "import-statement"
+        },
+        {
+          "path": "dist/picker-6YB3KD5M.js",
+          "kind": "dynamic-import"
+        }
+      ],
+      "exports": [],
+      "entryPoint": "src/widget.ts",
+      "inputs": {
+        "src/widget.ts": {
+          "bytesInOutput": 688
+        },
+        "src/composer.tsx": {
+          "bytesInOutput": 3467
+        },
+        "src/api.ts": {
+          "bytesInOutput": 1874
+        },
+        "src/styles.ts": {
+          "bytesInOutput": 3950
+        }
+      },
+      "bytes": 10215
+    },
+    "dist/picker-6YB3KD5M.js": {
+      "imports": [
+        {
+          "path": "dist/chunk-R4N7QW2L.js",
+          "kind": "import-statement"
+        }
+      ],
+      "exports": [
+        "default"
+      ],
+      "entryPoint": "src/emoji/picker.tsx",
+      "inputs": {
+        "src/emoji/picker.tsx": {
+          "bytesInOutput": 5830
+        }
+      },
+      "bytes": 5920
+    },
+    "dist/chunk-R4N7QW2L.js": {
+      "imports": [],
+      "exports": [
+        "EMOJI",
+        "SHORTCODES",
+        "h",
+        "render",
+        "useEffect",
+        "useRef",
+        "useState"
+      ],
+      "inputs": {
+        "node_modules/preact/dist/preact.module.js": {
+          "bytesInOutput": 10214
+        },
+        "node_modules/preact/hooks/dist/hooks.module.js": {
+          "bytesInOutput": 1436
+        },
+        "src/emoji/emoji-data.json": {
+          "bytesInOutput": 96512
+        },
+        "src/emoji/data.ts": {
+          "bytesInOutput": 402
+        }
+      },
+      "bytes": 108695
+    }
+  }
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/package.json.fixture

@@ -0,0 +1,17 @@
+{
+  "name": "@parcelpost/chat-widget",
+  "version": "2.6.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node build.mjs",
+    "size": "node scripts/check-size.mjs"
+  },
+  "dependencies": {
+    "preact": "^10.24.3"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0",
+    "typescript": "^5.6.3"
+  }
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/scripts/check-size.mjs

@@ -0,0 +1,11 @@
+// Fails CI if the widget gets too big for customers' pages.
+import { statSync } from 'node:fs';
+
+const LIMIT = 25_000; // bytes, minified, uncompressed
+const size = statSync('dist/widget.js').size;
+
+console.log(`dist/widget.js: ${size} bytes (limit ${LIMIT})`);
+if (size > LIMIT) {
+  console.error('widget.js is over its size budget');
+  process.exit(1);
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/src/api.ts

@@ -0,0 +1,11 @@
+const ENDPOINT = 'https://chat.parcelpost.example/v1/messages';
+
+export async function sendMessage(text: string) {
+  const res = await fetch(ENDPOINT, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', 'x-widget-key': 'PLACEHOLDER_WIDGET_KEY' },
+    body: JSON.stringify({ text, page: location.href }),
+  });
+  if (!res.ok) throw new Error(`send failed: ${res.status}`);
+  return res.json();
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/src/composer.tsx

@@ -0,0 +1,21 @@
+import { h } from 'preact';
+import { useRef, useState } from 'preact/hooks';
+import { sendMessage } from './api';
+import { SHORTCODES } from './emoji/data';
+
+// PR #412: turn :smile: style shortcodes into emoji as the visitor types.
+const SHORTCODE_RE = /:([a-z0-9_+-]+):/g;
+const expandShortcodes = (text: string) =>
+  text.replace(SHORTCODE_RE, (m, code) => SHORTCODES[code] ?? m);
+
+export function Composer({ openPicker }: { openPicker: (cb: (c: string) => void) => void }) {
+  const [text, setText] = useState('');
+  const input = useRef<HTMLTextAreaElement>(null);
+  return (
+    <form onSubmit={(e) => { e.preventDefault(); sendMessage(text); setText(''); }}>
+      <textarea ref={input} value={text} onInput={(e) => setText(expandShortcodes(e.currentTarget.value))} />
+      <button type="button" aria-label="Insert emoji" onClick={() => openPicker((c) => setText(text + c))}>☺</button>
+      <button type="submit">Send</button>
+    </form>
+  );
+}

package/packs/frontend/skills/bundle-size-review/evals/files/9/src/emoji/data.ts

@@ -0,0 +1,8 @@
+import EMOJI from './emoji-data.json';
+
+export interface Emoji { char: string; shortcode: string; name: string; group: string; keywords: string[] }
+
+export { EMOJI };
+export const SHORTCODES: Record<string, string> = Object.fromEntries(
+  (EMOJI as Emoji[]).map((e) => [e.shortcode, e.char]),
+);

package/packs/frontend/skills/bundle-size-review/evals/files/9/src/emoji/picker.tsx

@@ -0,0 +1,22 @@
+import { h, render } from 'preact';
+import { useState } from 'preact/hooks';
+import { EMOJI, type Emoji } from './data';
+
+function Picker({ onPick }: { onPick: (c: string) => void }) {
+  const [q, setQ] = useState('');
+  const shown = (EMOJI as Emoji[]).filter((e) => !q || e.keywords.some((k) => k.includes(q))).slice(0, 200);
+  return (
+    <div class="pp-picker">
+      <input placeholder="Search emoji" value={q} onInput={(e) => setQ(e.currentTarget.value)} />
+      <div class="pp-grid">
+        {shown.map((e) => <button key={e.shortcode} title={e.name} onClick={() => onPick(e.char)}>{e.char}</button>)}
+      </div>
+    </div>
+  );
+}
+
+export default function mountPicker(root: HTMLElement, onPick: (c: string) => void) {
+  const el = document.createElement('div');
+  root.appendChild(el);
+  render(<Picker onPick={onPick} />, el);
+}