@stoplight/mosaic-code-viewer
Advanced tools
Comparing version 1.0.0-beta.3 to 1.0.0-beta.4
@@ -317,5 +317,5 @@ import { Box, useClipboard, Button } from '@stoplight/mosaic'; | ||
}), { | ||
className: "sl-highlight_line" | ||
className: "sl-table-row" | ||
}), showLineNumbers ? React.createElement("div", { | ||
className: "sl-highlight_line_no", | ||
className: "sl-table-cell sl-select-none sl-opacity-50", | ||
style: { | ||
@@ -325,3 +325,3 @@ width: gutterWidth | ||
}, i + 1) : null, React.createElement("div", { | ||
className: "sl-highlight_line_content" | ||
className: "sl-table-cell" | ||
}, line.map(function (token, key) { | ||
@@ -328,0 +328,0 @@ return React.createElement("span", __assign({ |
@@ -322,5 +322,5 @@ (function (global, factory) { | ||
}), { | ||
className: "sl-highlight_line" | ||
className: "sl-table-row" | ||
}), showLineNumbers ? React__default.createElement("div", { | ||
className: "sl-highlight_line_no", | ||
className: "sl-table-cell sl-select-none sl-opacity-50", | ||
style: { | ||
@@ -330,3 +330,3 @@ width: gutterWidth | ||
}, i + 1) : null, React__default.createElement("div", { | ||
className: "sl-highlight_line_content" | ||
className: "sl-table-cell" | ||
}, line.map(function (token, key) { | ||
@@ -333,0 +333,0 @@ return React__default.createElement("span", __assign({ |
@@ -1,2 +0,1 @@ | ||
import './style.css'; | ||
import { BoxOwnProps, IButtonProps } from '@stoplight/mosaic'; | ||
@@ -3,0 +2,0 @@ import { Language } from 'prism-react-renderer'; |
{ | ||
"name": "@stoplight/mosaic-code-viewer", | ||
"version": "1.0.0-beta.3", | ||
"version": "1.0.0-beta.4", | ||
"sideEffects": false, | ||
@@ -12,8 +12,9 @@ "peerDependencies": { | ||
"dependencies": { | ||
"@stoplight/mosaic": "1.0.0-beta.3", | ||
"@stoplight/mosaic": "1.0.0-beta.4", | ||
"clsx": "^1.1.1", | ||
"@fortawesome/fontawesome-svg-core": "^1.2.32", | ||
"@fortawesome/react-fontawesome": "^0.1.12", | ||
"zustand": "^3.1.4", | ||
"zustand": "^3.2.0", | ||
"@fortawesome/free-solid-svg-icons": "^5.15.1", | ||
"reakit": "^1.3.0", | ||
"ts-keycode-enum": "^1.0.6", | ||
@@ -20,0 +21,0 @@ "copy-to-clipboard": "^3.3.1", |
@@ -12,8 +12,8 @@ # Mosaic Design System | ||
- [x] Good dx in browser devtools | ||
- [x] Scoped classes, won't clash with existing styles when embedded into site | ||
- [x] Supports SSR | ||
- [x] Scoped classes, won't clash with existing styles when embedded into site | ||
- [x] Downstream consumers do not have to separately manage CSS build pipline (css is included in JS bundle) | ||
- [ ] "Invert-able" component theme. E.g. a "dark" panel can be rendered in context of "light" rest of screen | ||
- [ ] Great accessibility | ||
- [x] Sane core library size. Target GZIP bundle size less than 50kb, including CSS | ||
- [x] Sane core library size. Treeshakable. Target GZIP bundle size less than 50kb, including CSS | ||
- [x] Core icons are included with the bundle, no need for consumers to manage separate font awesome css / loading. That | ||
@@ -35,4 +35,63 @@ said, other font awesome icons can easily be used by loading a kit or the css in context of consuming application. | ||
Just import and use. No context providers or wrapping components required. | ||
#### Load CSS Styles | ||
_Client Side_ | ||
When using Mosaic in a client side application you must import and inject the css styles. We recommend that you do this | ||
once towards the top of your application. Calling `injectStyles` more than once results in a no-op so that styles are | ||
not duplicated by accident. | ||
```tsx | ||
// your application, somewhere early in the rendering | ||
import { injectStyles } from '@stoplight/mosaic'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
// this injects a style tag into the head of your document, with the mosaic css | ||
injectStyles(); | ||
ReactDOM.render( | ||
<React.StrictMode> | ||
<App /> | ||
</React.StrictMode>, | ||
document.getElementById('root'), | ||
); | ||
``` | ||
_SSR_ | ||
If your application supports server side rendering, we recommend that you inject the style tag on the server to avoid a | ||
flash of content on page load. You should not need to use the client side loading method above if you include the style | ||
tag in SSR. If you do this by accident Mosaic will detect the existing style tag and not duplicate styles on the client. | ||
```tsx | ||
// your application, somewhere early in the rendering | ||
import { InlineStyles as MosaicInlineStyles } from '@stoplight/mosaic'; | ||
import React from 'react'; | ||
import ReactDOM from 'react-dom'; | ||
yourServer.handler(res => { | ||
const markup = ReactDOM.renderToString( | ||
<html> | ||
<head> | ||
<InlineStyles /> | ||
</head> | ||
<body> | ||
<div id="root"></div> | ||
</body> | ||
</html>, | ||
); | ||
return res.send(markup); | ||
}); | ||
``` | ||
**2. Use it** | ||
Once the CSS is taken care of, you can just import and use Mosaic components. No context providers or wrapping | ||
components required. | ||
```jsx | ||
@@ -39,0 +98,0 @@ import { Box, Button } from '@stoplight/mosaic'; |
39518
167
11
8
885
+ Addedreakit@^1.3.0
+ Added@popperjs/core@2.11.8(transitive)
+ Added@stoplight/mosaic@1.0.0-beta.4(transitive)
+ Addedbody-scroll-lock@3.1.5(transitive)
+ Addedreact@17.0.2(transitive)
+ Addedreact-dom@17.0.2(transitive)
+ Addedreakit@1.3.11(transitive)
+ Addedreakit-system@0.15.2(transitive)
+ Addedreakit-utils@0.15.2(transitive)
+ Addedreakit-warning@0.6.2(transitive)
+ Addedscheduler@0.20.2(transitive)
- Removed@stoplight/mosaic@1.0.0-beta.3(transitive)
Updatedzustand@^3.2.0