{"_id":"@arnau/pikt","_rev":"2-676d0653c6a93be39fbc33ca4a54f270","name":"@arnau/pikt","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arnau/pikt","version":"0.1.0","private":false,"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"description":"A WebAssembly version of Pikchr","type":"module","source":"src/index.js","main":"index.js","module":"index.js","scripts":{"build":"rollup --config rollup.config.js --environment BUILD:production"},"author":{"name":"Arnau Siches"},"license":"MIT","devDependencies":{"@rollup/plugin-node-resolve":"^13.0.5","rollup":"^2.57.0"},"gitHead":"cb7c0e12d92698b11f68948c88544ef1fee483cd","_id":"@arnau/pikt@0.1.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-Cwrt7fmYpUhaHUouLmM1sRBkRr+ZAOIPzo5K47ImdBJuc6/XTKD+/IJUmWP5ToloFiJkP+EAvh6x8FyueE3DEw==","shasum":"3c42f4e7f34a9d9766fc2790bfae934b6bfc3c71","tarball":"https://registry.npmjs.org/@arnau/pikt/-/pikt-0.1.0.tgz","fileCount":4,"unpackedSize":160321,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwzbLCRA9TVsSAnZWagAAVRwP/jOj+1qJwYVt/AILJx6N\nyjW1JyAG9UuFXtpEUBXCHGRzjWetBfQqYWVnBmwm11vNxVLscZT5xnstMZN+\nYKEciViX5FIs13CJrCwa8PRhS7gGruHKWiqXqa8QMqSJ60S8XkH/bTkhfRqZ\naCMqyabOssbDz0I8t654hFq45cVCyPm6qYehRXKwZ6VFk4qZ8OdeN88IYLhG\nDA75WJyE0ZwodazlSCZQyOjDTQUYE8tW4aqvcmo8dZbXpChAx4XH9dXfMAcN\n1TKTV4EkbIB13II9BWoy+bKFd4q4GnsSePin2OUki7VeGkzQasU/t7AITkA2\nUSBvY55IbpROjVE3ukvEVOMhFwW+hyPcWUFdQaud95bphRFWwEjm5zyewIRN\nktrqeNkLbwMaZe3plGG8XATx3yPmSgbBb3nP0TVRwm7egV74uyjEky471S0A\npFAxmlBh2iDsM06ZsOzSdcjPy980xdPbezgRBXfKGLnCYKSRIXhxxgoOzctH\nRtG8+IUbUwapNbeNMOU7S6bEDt6C5yOIQ4yhd12fGvzuLlyD4RyYNe7wzzhg\nvySa74KECo9010eREKLJQpcoHUcVnr/65izEz43FAgDec9uHzJRX3yjYzySo\n8goLs9IbXDIVD0yRExSJL50oKZ9NUH6xxyYx7tCOVhYgOcKq7+l/HeXBbANb\ns2F/\r\n=SW/o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASU7Eq2XoLgDXMe+NIUIVTIp475d2+eW3Jl+ZurhqTdAiATkb442A64uEbIxYkedf4UB+iAoZMMvipEyvk7yo6nmg=="}]},"_npmUser":{"name":"arnau","email":"arnau.siches@gmail.com"},"directories":{},"maintainers":[{"name":"arnau","email":"arnau.siches@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pikt_0.1.0_1634482993752_0.48282645698438786"},"_hasShrinkwrap":false}},"time":{"created":"2021-10-17T15:03:13.706Z","0.1.0":"2021-10-17T15:03:13.903Z","modified":"2022-04-04T15:33:40.065Z"},"maintainers":[{"name":"arnau","email":"arnau.siches@gmail.com"}],"description":"A WebAssembly version of Pikchr","author":{"name":"Arnau Siches"},"license":"MIT","readme":"# Pikt.js\n\nA JavaScript library for [Pikchr] in the browser.\n\n\n## Usage\n\nAfter installing the library using `npm install @arnau/pikt` you'll have two choices: a `render` function and a Web Component.\n\n## `render` function\n\n`render` is an asynchronous function wrapping the C `pikchr` function. It expects a pikchr source and optionally\nsome configuration and returns a SVG. For example, in the [Deno] repl you could:\n\n```js\nimport { render } from \"pikt\"\n\nconst source = `box \"pikt\"`\nconst result = await render(source)\n```\n\nWill render a SVG as follows\n\n```svg\n\n\npikt\n\n```\n\n**Note**: Using the `node` repl will require using dynamic imports and resolving an issue with `__dirname`:\n\n```js\nconst path = await import(\"path\")\nconst __dirname = path.resolve()\nconst pikt = await import(\"./index.js\")\n\nawait pikt.render(`box \"foo\"`)\n```\n\nIf the process errors, for example due to a syntax mistake such as `box \"pikt` (missing closing double quote), the result is the formatted error wrapped in a `div`:\n\n```html\n
\n/*    1 */\n/*    2 */\n/*    3 */              box \"pikt\n                            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nERROR: unrecognized token\n
\n```\n\nThe `render` function accepts an object as second parameter to configure Pikchr's behaviour. For example:\n\n```js\nrender(`box \"pikt\"`, { darkMode: true })\n```\n\nWill render the diagram with colours inverted for optimal display in dark backgrounds.\n\n### Configuration options\n\n- `darkMode` (boolean): If true, `fill` and `stroke` colours in the resulting SVG will be their inverse.\n- `width`, `height` (number): When provided, Pikchr will use them to set a fixed `width` and `height` for the `svg` element.\n- `classes` (string): The string is expected to be a valid space-separated list of class names. Defaults to `pikchr pikchr-render`.\n\n\n## `pikt-diagram` web component\n\n`definePiktDiagram` defines a custom element wrapping the `render` function. By default it registers the custom element\nas `pikt-diagram` but it can be changed by passing a valid name to the function.\n\n```js\n// index.js\nimport { defineCustomElements } from \"pikt\"\n\ndefinePiktDiagram()\n```\n\n```html\n\n\n \n \n 
\n      box \"pikt\"\n
\n \n \n \n\n```\n\nNote that `pikt-diagram` expects the text inside the element to be valid pikchr markup. Any non-textual element is ignored. In the example above both `pre` and `code` don't affect the rendering of the resulting SVG but can help as fallback in case JavaScript is not executing properly.\n\n\n### Attributes\n\nThe only attribute accepted by `pikt-diagram` is `mode` with a value of:\n\n- `light`: Colours are untouched. Defaults are black for lines and text and transparent for backgrounds.\n- `dark`: Colours are inverted.\n- `auto`: Behaves like `light` or `dark` depending on the [`prefers-color-scheme`] value.\n\nIf `mode` is not provided it defaults to the `light` behaviour.\n\n\n### Changing the colour scheme\n\n`pikt-diagram` will respect `prefers-color-scheme` when using `mode=auto`. This can be insufficient in situations where you want to let users control the scheme indepedently of their system preference.\n\nThe [example](./example) shows a way to allow users to change the colour scheme using CSS filters.\n\nIn short, the idea is to add a class depending on `prefers-user-color` and use a few CSS rules as follow:\n\n```css\n:root {\n --light-background-color: ivory;\n --light-foreground-color: #222;\n\n --dark-background-color: #333;\n --dark-foreground-color: lightgreen;\n}\n\n.dark-scheme {\n --background-color: var(--dark-background-color);\n --foreground-color: var(--dark-foreground-color);\n}\n\n.dark-scheme pikt-diagram:not([mode]) {\n filter: invert(100%);\n}\n```\n\nIn the example above, `pikt-diagram` has _no_ `mode` attribute which defaults to light mode so, when `prefers-user-scheme: dark` is true, the class `.dark-theme` will be present and lines and text that by default are black will be rendered as white.\n\n\n## Licence\n\nArnau Siches under the [MIT License](./LICENCE).\n\nThe [Pikchr] source `pikchr/pikchr.c` and the WebAssembly version embedded in `src/pikchr.js` are licenced under the\n[BSD Zero Clause License].\n\n\n[Pikchr]: https://pikchr.org/\n[BSD Zero Clause License]: https://opensource.org/licenses/0BSD\n[Deno]: https://deno.land/\n[`prefers-color-scheme`]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\n","readmeFilename":"README.md"}