ribcage-preview - npm explorer

ribcage-preview
===============

Preview a UI component. Runs an atomify preview server with live reloading, server-side rendering (for react components), and react-router support.

Install

``sh npm install -g ribcage-preview`

`Usage`

`sh ribcage-preview

should be the directory of the component you want to preview.

`sh open http://localhost:4001/default`

This URL will livereload on every file change, and load in the compiled entry.js and entry.css.

`$3`


Create an

example folder in your with an entry.js and an entry.css and optionally an entry.html and data.js files.

`- index.{js,jsx} - index.css - example/ - entry.{js,jsx} - entry.css - [data.{js,json}] - [entry.html]`

`$3`

.jsx files are also recognized. If the index file is .jsx, client-side JS will be off by default unless you pass a s or --client-jsx flag. The index.jsx file is always rendered by the server and the results appended to

. Your example/entry.jsx is the client-side entry for browserify. It should render into the same div.

If you specify React.documentHead = {title: 'my title'}, the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag will be set on the server. You might like a pattern like this:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">js<br />import React from 'react'<br />import setHead from 'react-document-head'</p><p class="my-3">class A extends React.Component {<br /> render () {<br /> setHead({title: 'my sparky page'})<br /> return <div /><br /> }<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Flags</h2><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />You can disable sourcemaps with </code>--no-debug<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />If the entry file is </code>.jsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, client-side js will not be served unless this flag is passed. </code>react<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> needs to be installed in </code>node_modules<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in the cwd.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />If passed, the index file should pass a routes object for react-router instead of a component. This turns on </code>spaMode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> so that both the server and the client render the same routes. </code>react-router<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> needs to be installed </code>node_modules<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in cwd.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br /></code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> by default. Allows you to turn of autoprefixing for CSS.</p><p class="my-3"><br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3><br />If you have an </code>example/entry.jsx<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> file, it's rendered on the client for you. If you want to provide data to this client on the server, put in a </code>example/data.json<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>example/data.js`. This object will get passed as props to the react component by the server. You're responsible for passing this object to your component on the client.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"2c:[\"$\",\"$L5\",\"react-a11y\",{\"href\":\"/package/react-a11y\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-a11y\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.2.5\"}]]}]\n2d:[\"$\",\"$L5\",\"resrcify\",{\"href\":\"/package/resrcify\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"resrcify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.1.3\"}]]}]\n2e:[\"$\",\"$L5\",\"yargs\",{\"href\":\"/package/yargs\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"yargs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.10.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>