[!NOTE]
Held in the #18985 reserve: not open for claiming yet. Curated issues are released in batches as review capacity frees up. Please pick an issue labelled good first issue instead.
This one is also being moved to the component tier first: it tests something a human looks at, and #18985's tier rule sends those to a real browser.
Welcome 👋
Neo.component.Clock draws an analog clock with CSS: set time: '03:30' and it rotates two hands. The maths is four lines of school geometry, and nothing pins it yet. This is a friendly first spec: set a config, read the component's virtual DOM, compare numbers.
This is a good first issue for Hacktoberfest 2026. It needs Node.js and a clone of this repository: no Docker, no AI setup.
[!IMPORTANT]
Reserved for first-time Neo.mjs contributors. The maintainer team will not claim, edit, or implement this issue through 2026-10-31. Comment here to claim it, and ask anything on this issue.
Set up once: follow Set up the engine from a clone, including npm run bundle-browser-deps: without it the unit suite selects zero tests.
Where things live
- Source:
src/component/Clock.mjs. Its vdom.cn[0] is the minute hand and vdom.cn[1] the hour hand; each gets a style.transform of rotate(<deg>deg).
- New test file:
test/playwright/unit/component/Clock.spec.mjs
- Pattern to copy:
test/playwright/unit/component/Progress.spec.mjs (creating a component with Neo.create() in a unit test)
What to cover
| Config |
Expected |
time: '03:30' |
minute hand rotate(180deg), hour hand rotate(105deg) |
time: '15:45' |
minute hand rotate(270deg), hour hand rotate(112.5deg): hours wrap at 12 |
time: '12:00' |
both hands rotate(0deg) |
size: 300 |
style.height and style.width are '300px' |
size set to a non-number (e.g. '50%') |
height and width are removed from style |
showDisc: false, then true |
the neo-show-disc class is removed, then added |
fontSize: 30 |
style.fontSize is '30px' |
The formulas, from the source: hour angle 30 * (hours % 12) + 0.5 * minutes, minute angle 6 * minutes.
Done when
Out of scope
Styling, animation, and a live ticking clock.
While you wait for review
You just pinned one small piece of a multi-threaded application engine: in Neo.mjs your app's code runs inside a web worker, and the main thread only paints. Two things worth ten minutes:
- See the part nobody expects. Run
npm run build-themes -- -n -e dev -t all and npm run server-start, open apps/workstation/, and drag a tab out of the browser window. It becomes its own OS window, still running, with the same component instances and the same worker. Benefits: Introduction explains why that is possible.
- Your coding agent can go much further here. The skills this repository's AI maintainers work with are published on npm as
neo-agent-skills, and they need no Knowledge Base and no Memory Core. With Claude or GPT beside you, the help wanted issues are within reach after this one.
Maintainer notes
Curated under #18985 (Hacktoberfest 2026). Found work: no unit or component spec names this module on dev (2026-09-23); the angles follow from the source's two formulas.
Live latest-open sweep: the latest 20 open issues at 2026-09-23T14:24Z; no equivalent (Neo.component.Clock title search: none). A2A: no claim on this scope. Memory Core: no prior decision.
Origin Session ID: 3be453e4-8b04-4865-be62-4cff34f4e0c6
Welcome 👋
Neo.component.Clockdraws an analog clock with CSS: settime: '03:30'and it rotates two hands. The maths is four lines of school geometry, and nothing pins it yet. This is a friendly first spec: set a config, read the component's virtual DOM, compare numbers.This is a good first issue for Hacktoberfest 2026. It needs Node.js and a clone of this repository: no Docker, no AI setup.
Set up once: follow Set up the engine from a clone, including
npm run bundle-browser-deps: without it the unit suite selects zero tests.Where things live
src/component/Clock.mjs. Itsvdom.cn[0]is the minute hand andvdom.cn[1]the hour hand; each gets astyle.transformofrotate(<deg>deg).test/playwright/unit/component/Clock.spec.mjstest/playwright/unit/component/Progress.spec.mjs(creating a component withNeo.create()in a unit test)What to cover
time: '03:30'rotate(180deg), hour handrotate(105deg)time: '15:45'rotate(270deg), hour handrotate(112.5deg): hours wrap at 12time: '12:00'rotate(0deg)size: 300style.heightandstyle.widthare'300px'sizeset to a non-number (e.g.'50%')heightandwidthare removed fromstyleshowDisc: false, thentrueneo-show-discclass is removed, then addedfontSize: 30style.fontSizeis'30px'The formulas, from the source: hour angle
30 * (hours % 12) + 0.5 * minutes, minute angle6 * minutes.Done when
test/playwright/unit/component/Clock.spec.mjsexists, following the pattern file's setup.test(...)per table row.src/.npm run test-unit -- test/playwright/unit/component/Clock.spec.mjspasses.npm run test-unitpasses.Out of scope
Styling, animation, and a live ticking clock.
While you wait for review
You just pinned one small piece of a multi-threaded application engine: in Neo.mjs your app's code runs inside a web worker, and the main thread only paints. Two things worth ten minutes:
npm run build-themes -- -n -e dev -t allandnpm run server-start, openapps/workstation/, and drag a tab out of the browser window. It becomes its own OS window, still running, with the same component instances and the same worker. Benefits: Introduction explains why that is possible.neo-agent-skills, and they need no Knowledge Base and no Memory Core. With Claude or GPT beside you, thehelp wantedissues are within reach after this one.Maintainer notes
Curated under #18985 (Hacktoberfest 2026). Found work: no unit or component spec names this module on
dev(2026-09-23); the angles follow from the source's two formulas. Live latest-open sweep: the latest 20 open issues at 2026-09-23T14:24Z; no equivalent (Neo.component.Clocktitle search: none). A2A: no claim on this scope. Memory Core: no prior decision.Origin Session ID: 3be453e4-8b04-4865-be62-4cff34f4e0c6