Adding a FE framework's CSS and JS only once.

[BobbyBabes]

I've just installed uiengine and added several components with variants. I have the following in ./src/templates/variant-preview.pug :

doctype
html(class=`preview-${variant.id}`)
  head
    title= variant.title
    link(rel="stylesheet" href="../../../../uikit/dist/css/uikit-core.css")
  body
    != variant.rendered
    script(src="../../../../uikit/dist/js/uikit-core.js")

This is repeated in every component's iframe.

But I'd rather include the link and script of the FE framework only once. Is this possible ? Probably not because of the iframes. Or is there a way to not use iframe for components (that is not documented) ?

[dennisreimann]

I'm not sure I'm getting the problem here, so please elaborate in case I'm interpreting this the wrong way.

The variants are showcased each in a separate iframe to give you an encapsulated environment and ensure your custom styles don't get mixed up with those of the pattern library. Per se there is nothing bad with the fact that each variant is wrapped in a full layout which includes your styles and scripts. Using this approach, you are also declaring your asset references only one – in your layout. In case you need different layouts, you could also decide to encapsulate the asset references in separate include files, which depends on the use of the templating engine.

Nevertheless I'd say this looks alright to me. Let me know if you have a specific example that illustrates how this feels wrong or weird :)

[BobbyBabes]

The Problem is that the CSS and JS are not mine. They contain all CSS and all JS of the whole third party framework. Each link and script pulls in a new instance in an iframe.

[dennisreimann]

Ok, but as you embedded them in the layout you seem to need the third-party scripts and styles for your components. Why do you think embedding them is a problem? The layout and referenced assets should be the same as in your actual site. I would not worry too much about referencing just what the actual component needs. Instead I'd focus on providing the components with an environment they are used in on the actual end product/website.

[BobbyBabes]

Size. CSS is 217KB compressed and JS is 65.9 KB. And from what I can see is that they are not being cached by Chrome. EDIT: uiengine and uikit are installed remote.

[BobbyBabes]

I installed remotely because of the cross-origin frame error below (taken from the Chrome log). Perhaps I should run uiengine from a local server.

Navigated to file:///home/BobbyBabes/dev/web/docs/uikit3/uiengine-test/dist/atoms/button/index.html

..........

uiengine.7100a5bf.js:330 Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': 
Blocked a frame with origin "null" from accessing a cross-origin frame.(…)
    iframe.onload.e @ uiengine.7100a5bf.js:330

[dennisreimann]

Ah, now I get it :)

Yes, the UIengine output is supposed to be served locally by BrowserSync or a similar server.

Normally that could be provided by your build process, but you can also run the UIengine in standalone mode. To do so, start it by running uiengine generate --serve, which gives you a BrowserSync instance.

Similar to the serve flag, you can also enable the --watch mode. This rebuilds the pages affected by a change, which is handy during development. Please see the uiengine generate --help docs for details on that.

Keep in mind: in the long run you might want to hook this up with your build process. There is a very lightweight integration for Gulp already (see the integration docs for that) and I'm planning to extend these integrations in the near future. Let me know if you need help with that :)

[BobbyBabes]

OK, if that's the case I'll use BrowserSync, locally. That will probably reduce the delay. My build process is npm run from package.json. So I'll wrap the standalone mode commands (uiengine generate --help) in my scripts when I'm adding this. Thanks for helping out, and of course for this great project.

I'll spend a couple of hours more to get the hang of it. The hard things are :

• finding out what and where to add and make changes in files to make these changes appear at the right spot and sequence in the documentation output. With "what" I mean : finding keywords/variables and their allowed values, for example like

  ---
  title: Primary button
  status: Ready
  label: B02
  context:
  title: Buy now!
  type: submit
  ---

  These were already documented here : https://github.com/dennisreimann/uiengine/blob/8c686ae21c35260995b4a3dda5219888e536ae1f/docs/variant.md But if there are more I'd like to know.

[dennisreimann]

Alright, let me know about the rough or missing spots in the docs and I'll try to improve them with the feedback I get from issues like this one :)

In watch mode the changes in the files should be picked up and the according pages will be rebuild automatically. Let me know if this is working for you :)

[BobbyBabes]

Watch mode seems to be working OK. But with uiengine generate --watch --serve I'm seeing > undefined @ 2545px at the top of the Preview box.

<div class="variantpreview__size">
    <button class="variantpreview__sizer" type="button" data-breakpoints-target="button-button-pug-breakpoints">&lt; undefined @ 2545px</button>
</div>

[dennisreimann]

Ah, you have not configured any breakpoints I guess. See the config docs on how to do this.

Nevertheless the display shouldn't appear in this case.

[BobbyBabes]

You're right. I didn't. Luckily it was something easy. I'm just curious why it isn't displayed with uiengine is installed remotely. Or installed locally but accessed through the local file system (instead of through BrowserSync).

I'm going to read up first and spend some time with uiengine. Anything I can't fix by reading the docs, I'll open one issue for all. Thanks.

[dennisreimann]

Great, thanks for your feedback already!