biotope / biotope-resource-loader

Biotope, a toolchain for lasting design systems.

Biotope helps you to build, distribute and adopt a library of web components with a consistent design and of high quality across all your websites and apps. With Biotope you can easily collaborate with your team to develop and maintain the user interface of all your digital experiences from a single location.

If you want to learn more about Biotope and how you can benefit from using this toolchain please visit https://biotope.sh

Quick Start

Installation

First and foremost, you need to install biotope either as global package:

npm i biotope -g

After that you can use the biotope commandline tool to start a new biotope project.

Setup your first project

Setting up your first biotope instance, you should just trust the cli tool to setup your project. Just run:

biotope create [project-name]

This command will ask you some questions and create a new biotope-boilerplate instance.
After the tool is done, you can change directory to the newly generated biotope instance and run it:

cd [project-name]
npm start

Developing your first component

After starting your project, if you've chosen the empty instance, you should see an empty overview page.
Now to add your first component, just run

biotope generate

After asking you some questions, a new component will be created and ready to be developed. After that, you can go into the newly generated files an change them at your will.

biotope-resource-loader's Issues

Handlers get overwritten

Currently the iffe resource loader does overrife the handler options. This should be resolved!

Add headers to fetch resources

Prefetching/fetching resources is done via fetch. Fetch by default won't send any cookies with it's requests.

I would like to be able to configure the headers for different reasons: authentication, split testing

What do you think @SheepFromHeaven @timomayer?

write documentation similar to biotope element

and publish it under loader.bioto.pe

Refactor resource handlers to return promises

@tiagomapmarques suggested on #148 that developers might wish to overwrite the promise resolution of the default handlers.

Currently all resource handlers (html, css, js) resolve have a default resolution of promises.
The current implementation allows developers to overwrite these handlers, through options passed on to ResorceLoader contructor, but only fully, not partially.

Therefore I am opening this issue as a way to centralize discussion on this feature request.

Move data-init to resource loader

Currently, initialising plugins is the responsibility of biotope-boilerplate.

Since resource-loader is the technology providing support for that kind functionality in the first place, it should part of this codebase.

Polyfill IE11

Currently the resource loader is not working for IE11 due to missing polyfills.

remove documentation from readme.md and link to new docs

dependencies are loaded when the file it depends on is loaded, not yet in scope

we have the problem that we load dependencies when the file they depends on are loaded but maybe not yet parsed and in scope. so a variable/function which we asume to exist in the "depends on" file is not yet available. we need to change our dependency management so dependencies are only initialized when the "depends on" file is in scope, and not just loaded.

Traverse to github actions

From travis to github actions

add an example data-resource structure to "usage" page in documentation

think this will help to get familiar with the usage more easy.

add possibility to load html

at the moment the loader is only able to load js, css. it should be possible to load html too.

when an html file is in the resources, the html file has to be inserted to the DOM (as child of the element with data-resource) afterwards the init function should be called.

Not loading correctly for a # in URL

Currently:
the resource loader does not correctly resolve urls on a page which has a # parameter in the URL

Expected:
I can have # in the URL and still use the resource loader correctly

add tests and increase test coverage

the coditionalLoader is such a central part of our projects it should have automated test coverage via travisCI

Queue not emptying

Currently:
The resource loader will not fire the resourcesReady event as the queue get not cleared out correctly

Expected:
When all the resources are loaded and handled, the resourcesReady event should fire

use fetch instead of jquery ajax

https://developer.telerik.com/featured/fetch-modern-async-server-calls/
with an optional polyfill for older browsers: https://github.com/github/fetch

when we get rid of jQuery dependency in the condLoader we can use it in more projects and jQuery can be a dependecy we load with the conditional loader - much more flexibility.

lets have a look at https://github.com/jhabdas/fetch-inject especially for performance

events when data is loaded and initialized

the conditional loader should fire events when
all resources for a data-resource attr are loaded on the same DOM element
when data-init is executed on the same DOM element

when all resources in the page are loaded on the $(document)
when all things are initialized (with the main.js) on the $(document)

Why does dist folder include only the compressed version?

I do not want to use compressed version of scripts during development as they make debugging difficult. It's good to have the min.js version in dist folder, but you should include the none-compressed version (resourceLoader.js) as well, specially since most projects compress their resources themselves anyway. Giving users a choice to use the version they prefer would make the library more popular. Also it's easy to compress a none-compressed version, but not vice versa.

please also add html default handler

biotope-resource-loader/src/defaultOptions.ts

Line 10 in c7e401d

jsHandler

Add rerun possibility

Currently one cannot rerun the resource loader. We need this feature for dynamic HTML

Broken exports of modules and legacy scripts

Affects resourceLoader.min.js and resourceLoader.module.min.js.

The problem comes from the source files that compile these targets

resourcesReady does not mean a script has finished parsing

The resourcesReady event does not take into account the fact that scripts might not yet have finished loading/being parse.
This creates a racing condition on certain projects, especially ones that attach component contructor functions to jQuery.

Add codecov badge to Readme.md

Like we have it for biotope element, please add codecov badge to top off the Readme.md

Remove dist folder

Is there a specific need for the dist folder? We could build the dist folder right before publishing to npm?

resource loader does not recognize data-resources of components in #shadow-root

Marc and me just recognized that recource-loader does not initialize web components referenced inside #shadow-root of another web component.

integrate an optional observe mode checking for new data-resource attributes

use https://developer.mozilla.org/de/docs/Web/API/MutationObserver
to observe for attribute changes on data-resource
implement a global cache of already loaded and initialized resources to not load them on next iteration again

initialization feature backward compatability with none class based js files

As discussed in this comment:
#168 (comment)

i am pretty sure projects using loader v1 and v2 are using a lot js files which are neither class based nor self initializing. make loader v3 compatible with them is a must otherwise we ll see very slow adoption of loader v3

update documentation to use docusaurus

as we do in element for a while we should use https://github.com/facebook/docusaurus v2 alpha for the element documentation

Rewrite to TS/ES6

rewrite the conditional loader to TS/ES6

add media queries to data-resource attr

add the possibility to use media queries to load data conditionally for different breakpoints.

Loading resources on click or other events

It would be a great feature to load resources only on an event like klick or scrollover.

loading the same file within different components causes timing issues

When loading a small file that depends on a big file multiple times on a page it causes a timing issue which leads to an unwanted behaviour.

Finding with three.js and MTLLoader.js:
MTLLoader depends on three.js and can be loaded with the conditional loader. This works fine as long as there is only one instance. When there are multiple instances the loading is broken and the dependsOn feature is bypassed.

This is caused by https://github.com/frontend-framework/conditional-resource-loader/blob/ab0c084d473b32348bb00f3b052dae990cbe206f/src/resourceLoader.js#L213

Loading the file takes longer than executing the resourceLoader script, which causes the promise to resolve and start the next file load. If this file is significantly smaller than the first file, it gets loaded before the loading of the first file is finished. This is even enhanced when dealing with slow connections.

feature: first view, first load feature

make it possible that the resurceloader loads and executes resources first which are "above the fold" so visible in the first viewport a user sees and load the rest of the page afterwards in addition to:
#164

cleanup the new docs

In the new docs there are still a lot broken links in the footer section, please lets clean them up before 3.0 release so the docs look polished :)

URL validation regex leads to Catastrophic Backtracking

The regex that's used in isHtmlFilePath needs to be altered ASAP, since for some URLs(e.g. https://feature-web.dev.xyzasd.ljl.com/) this leads to Catastrophic Backtracking that may crash the whole page.

default file handlers are missing

current status: ther eare no default file handlers built in version 2 (like we had in version 1)
therefore v2 is not working "out of the box" and not like described in the documentation.
you have to configure handlers in every project, example:
https://github.com/biotope/biotope-boilerplate/blob/master/src/resources/ts/main.ts

expected:
the loader should have default file handlers build in, which can be obverwritten but should work without any configuration needed per project.

Add script for making data-init backward compatible

As a developer I want migration from v1 or v2 to v3 as easy as possible. This includes also that I get the script that makes data-init backward compatible either in the docs or as a script I can import.

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (biotope/biotope-resource-loader) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

---

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Performance improvements

Async load of files
Already collect data-resource from Dom and start loading the resources as early as possible (maybe suggest in documentationmove resource loader to of html)
...

RFC: Change package manager to npm

I would like to propose the change from yarn to npm package manager.

I would like to do so, because of npm audit and because it feels more "native".

What do you think about it?

Versioned loads

We should be able to load scripts versioned. @timomayer could you provide a example syntax, what you have thought about.

Add link to biotope.sh

Is your feature request related to a problem? Please describe.
We would like to improve the findability of the Biotope website when people are using a search engine.
A link from this repository to the parent homepage would help with that to let search engines understand that this page is important.

Describe the solution you'd like
Please add a link in the readme and/or in the documentation with a similar text to this:

Biotope Resource Loader is part of Biotope, a toolchain for lasting design systems.

Biotope helps you to build, distribute and adopt a library of web components with a consistent design and of high quality across all your websites and apps. With Biotope you can easily collaborate with your team to develop and maintain the user interface of all your digital experiences from a single location.

If you want to learn more about Biotope and how you can benefit from using this toolchain please visit https://biotope.sh