Added Storybook using JSX with UV demos #720
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| <script src="https://unpkg.com/[email protected]/dist/ResizeObserver.js"></script> | ||
| <script src="/uv-assets/js/bundle.js"></script> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -14,7 +14,8 @@ import { Helper, loadManifest, IManifoldOptions } from "@iiif/manifold"; | |
| import { Annotation, AnnotationBody, Canvas, Sequence } from "manifesto.js"; | ||
| import { BaseComponent, IBaseComponentOptions } from "@iiif/base-component"; | ||
| import { URLDataProvider } from "./URLDataProvider"; | ||
| // Has to be require. | ||
| require("./lib/"); | ||
|
There was a problem hiding this comment. I think this was related to a bug when accessing globals like There was a problem hiding this comment. Whatever the reason, I think it would be a good idea to understand what is going on. My understanding of include vs. require suggests that the differences between them are minimal (the biggest difference is that require can accept dynamic inputs, while include cannot -- which makes include better for tree-shaking because it is predictable). If using include instead of require on a static input is causing a change in behavior, that's probably a side effect of some step in the compilation process related to Typescript and/or Webpack, and perhaps there's a different/better solution, or there are other implications. Anyway, I imagine there's a very good chance that @stephenwf has already thought this all through, but if that's the case, I'd just like to see more of that thinking captured in the comment so we don't have to re-investigate in the future when we come back around and wonder why exactly we need a require here. There was a problem hiding this comment. In short, the problem was the loading order. There's nothing in In terms of output, the only difference in the bundle is the removal of a hint left by Webpack for minification: - /* harmony import */ var _lib___WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./lib/ */ "./src/lib/index.js");
+ __webpack_require__(/*! ./lib/ */ "./src/lib/index.js");There was a problem hiding this comment. Interesting. Maybe the comment could be changed to something like |
||
|
|
||
| interface IExtensionLoaderCollection { | ||
| [key: string]: () => any; | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /** @jsx h */ | ||
| import { h } from 'jsx-dom'; | ||
| import { withKnobs, text, number } from '@storybook/addon-knobs'; | ||
| import { Viewer } from '../src/index'; | ||
|
|
||
| export default { title: 'Universal Viewer', decorators: [withKnobs] }; | ||
|
|
||
| type Data = { | ||
| manifestUri: string, | ||
| configUri?: string, | ||
| collectionIndex?: number, | ||
| manifestIndex?: number, | ||
| sequenceIndex?: number, | ||
| canvasIndex?: number, | ||
| rangeId?: number, | ||
| rotation?: number, | ||
| xywh?: string, | ||
| embedded?: boolean, | ||
| locales?: any, //?? | ||
|
There was a problem hiding this comment. Does this ?? comment indicate that further work/discussion is needed here? There was a problem hiding this comment. I think so, as far as I can tell, there are no types for the locale config in the UV. There was a problem hiding this comment. @edsilv, any thoughts on this? Hopefully we can either adjust the type (if necessary/possible) or remove the comment (if no further action is needed). There was a problem hiding this comment. I think typing it shouldn't be a problem |
||
| }; | ||
|
|
||
| const UVDemo = (data: Data) => { | ||
| const container = <div style={{ width: '100%', height: '100vh', minHeight: 500 }} /> as HTMLElement; | ||
|
|
||
| const uv = new Viewer({ | ||
| target: container, | ||
| data | ||
| }); | ||
|
|
||
| uv.on('created', () => { | ||
| uv.resize(); | ||
| }, {}); | ||
|
|
||
| return container; | ||
| }; | ||
|
|
||
|
|
||
| export const ScottishBridges = () => { | ||
| const manifestUri = text('Manifest URI', 'https://view.nls.uk/manifest/7446/74464117/manifest.json'); | ||
| const canvasIndex = number('Canvas Index', 30); | ||
|
|
||
| return <UVDemo manifestUri={manifestUri} canvasIndex={canvasIndex || 0} /> | ||
| }; | ||
|
|
||
| export const Wunder = () => { | ||
| const manifestUri = text('Manifest URI', 'https://wellcomelibrary.org/iiif/b18035723/manifest'); | ||
| const canvasIndex = number('Canvas Index', 0); | ||
|
|
||
| return <UVDemo manifestUri={manifestUri} canvasIndex={canvasIndex || 0} /> | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would sure be nice to figure out a way to not have to put this everywhere that bundle.js is loaded! (But that's a problem for another day...)