Skip to content

Releases: tsquare-js/react

v0.4.0

Choose a tag to compare

@github-actions github-actions released this 27 Oct 16:03
52fe0ff
  • Needs tsquare 0.13.2 or later (it was 0.12.1). Boards get tsquare's renderer fixes from 0.12.3 to 0.13.2.
  • A board's image size and its viewer's screen chips are exact on boards with notes: they come from tsquare's measureBoardLayout, which measures notes as drawn. boardLayout's estimate could be a line or more off for a note that wraps differently than its length suggests, so the image was scaled into a slightly wrong box and the chips zoomed to the wrong place.

v0.3.1

Choose a tag to compare

@github-actions github-actions released this 26 Oct 18:36
26a5918
  • Works with tsquare 0.13 as well as 0.12 (from 0.12.1). An app that installs tsquare 0.13 now shares one copy with this package instead of getting a second one. Nothing else changed; the tests pass on both 0.12.1 and 0.13.0.

v0.3.0

Choose a tag to compare

@github-actions github-actions released this 21 Oct 01:19
37a246f
  • The editor and playground are imported from @tsquare-js/react/editor, their own entry point, because they bundle CodeMirror (about 125 KB compressed): apps that import only @tsquare-js/react (boards, viewer, react-markdown) don't get it.
  • <WireframeEditor>: tsquare's code editor (the playground's): highlighting, autocomplete, problems underlined about 300 ms after typing stops, Enter keeping the indentation, a whole pasted model reply trimmed to its code block, long lines wrapped (continuing 4 spaces past their indentation). value/defaultValue, onChange, onProblems, autocomplete, lineNumbers, lineWrapping, ariaLabel; a ref gets getText, setText, focus and goToLine. Built on tsquare/editor (tsquare 0.12), with CodeMirror bundled inside it.
  • <WireframePlayground>: the editor and the viewer side by side on one text, half and half (stacked below 900px, or layout="row"/"column"). While someone types, the board redraws every 200 ms or so and problems wait; after a pause they're underlined in the editor and counted in a note on the board.
  • The viewer stops when it unmounts (tsquare's new destroy()): no listeners, resize watching or board image left behind.
  • Styles for the editor (its colors from the --tsquare-* theme; highlighting from --tsquare-syntax-*) and the playground; --tsquare-editor-height, --tsquare-playground-height.
  • Docs: Editor and Playground pages; the overview's table and Styling cover them.
  • Needs tsquare 0.12.1 or later.

v0.2.0

Choose a tag to compare

@github-actions github-actions released this 20 Oct 14:00
4865a6b
  • <WireframeViewer>: the board to explore: zoom (buttons, pinch, Ctrl/Cmd + scroll), pan, double-click to fit, and a chip per screen that zooms to it. chips and zoomControls turn each part off.
  • <Wireframe expandable>: a button (and selecting the board) opens it full size in the viewer, in a native dialog.
  • onProblems: called with the problems ({ line, message }) when the complete text has some, and with [] once fixed; never mid-stream. With showProblems={false} the app handles them, for example by sending them back to the model with tsquare's repairPrompt. In react-markdown, createTsquareComponents({ onProblems }) also gets each block's text.
  • createTsquareComponents(options): expandable, showProblems and onProblems for every board in react-markdown.
  • Styles: import "@tsquare-js/react/styles.css". Colors, fonts and corners come from --tsquare-* CSS variables; light and dark follow the page's color scheme or a dark/light class or data-theme; every rule is wrapped in :where(), so the app's CSS wins without !important. The components no longer use inline styles, except the board image's max-width: 100%; height: auto.
  • The board image is a data: URL instead of a blob: URL: nothing to release when it goes away.
  • Docs in docs/ (also on tsquare.dev/docs/react), every example typechecked by the tests, every prop checked to be documented.