@stoplight/mosaic-code-viewer - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

code-viewer.esm.js

@@ -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({

code-viewer.umd.js

@@ -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({

components/CodeViewer/CodeViewer.d.ts

@@ -1,2 +0,1 @@
-import './style.css';
 import { BoxOwnProps, IButtonProps } from '@stoplight/mosaic';
@@ -3,0 +2,0 @@ import { Language } from 'prism-react-renderer';

package.json

 {
   "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",

README.md

@@ -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';

No alert changes

Improved metrics

Total package byte prevSize

39518

increased by3.23%

Number of lines in readme file

167

increased by54.63%

Worsened metrics

Dependency count

11

increased by10%

Number of package files

8

decreased by-20%

Lines of code

885

decreased by-2.1%

Dependency changes

• + 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)

• Updated@stoplight/mosaic@1.0.0-beta.4

• Updatedzustand@^3.2.0