You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Theme Color IE issue (improve bundling, etc, for older browsers) #707
Best to have docsify handle loading all necessarily libraries (like poly/ponyfill) as needed via dynamic imports. This keeps the bundle size down, prevents users from having to manage multiple libraries just to get docsify working, and allows the docsify team to easily swap libraries for all users in future versions (e.g. switching from ponyfill "A" to ponyfill "B").
FWIW, docsify-themeable bundles css-vars-ponyfill, but this is only because times were different back when docisfy-themeable was created. If I were doing it today (and this is a change I will likely make in the future), I'd load css-vars-ponyfill via dynamic import instead of bundling:
consthasCSSCustomPropSupport=window?.CSS?.supports?.('(--a: 0)');if(!hasCSSCustomPropSupport){import('https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2').then((module)=>{// Do stuff...});}
I haven't tried Parcel yet, but Parcel is Webpack with default
configuration to make life easy.
Users do need a polyfill for ES Modules in older browsers to make an output
`.esm.js` file consumable, which is something they can add (and doesn't
need to be shipped with Docsify). Perhaps we should mention it in the docs
when we get around to adding the ESM build.
*#!/*JoePea
Probably not many people (if any?) will use the .amd.js build. Modern bundlers, and native ES Modules in browsers, will make use of the .esm.js output. The .umd.js output is what people use for the traditional global-style <script src=""> tags.
Activity
timaschew commentedon Feb 26, 2019
Please show a code snippet.
sohrabtaee commentedon Feb 26, 2019
The problem is that IE11 does not support CSS variables: https://caniuse.com/#feat=css-variables
I added the proper polyfills and it works fine now.
Since Docsify is advertised as "Compatible with IE10+", I guess a polyfill should be added to support CSS variables in IE.
anikethsaha commentedon May 14, 2020
shipping polyfills may increase the package size. I think we should update the docs with the guided steps ?
cc @jhildenbiddle @trusktr thoughts?
also, @jhildenbiddle if we need to ship polyfill for css variables from core, thoughts about css-vars-ponyfill ?
jhildenbiddle commentedon Jun 2, 2020
Best to have docsify handle loading all necessarily libraries (like poly/ponyfill) as needed via dynamic imports. This keeps the bundle size down, prevents users from having to manage multiple libraries just to get docsify working, and allows the docsify team to easily swap libraries for all users in future versions (e.g. switching from ponyfill "A" to ponyfill "B").
FWIW, docsify-themeable bundles css-vars-ponyfill, but this is only because times were different back when docisfy-themeable was created. If I were doing it today (and this is a change I will likely make in the future), I'd load css-vars-ponyfill via dynamic import instead of bundling:
(If you unfamiliar with the
window?.css ...syntax, see @babel/plugin-proposal-optional-chaining for details)anikethsaha commentedon Jun 2, 2020
We need to ship polyfill for dynamic import as well right ?
jhildenbiddle commentedon Jun 2, 2020
Nope. Bundlers like Rollup and Webpack handle these without issue or need for a plug-in.
anikethsaha commentedon Jun 2, 2020
ahh, yea
We will be migrating to webpack so I guess we can make use of that
jhildenbiddle commentedon Jun 2, 2020
What’s the issue with Rollup? Why Webpack vs Parcel, Snowpack, or some other bundler?
Not pushing for one over another, just wondering what the rational is for moving away from the current tool?
anikethsaha commentedon Jun 2, 2020
webpack is kind of optimal for creating a browser bundle.
We will be using rollup for the cli
trusktr commentedon Jun 3, 2020
trusktr commentedon Jun 3, 2020
As an idea, here's what Tween.js' output
dist/folder looks like: https://github.com/tweenjs/tween.js/tree/1f85d6e74491037653ddad2ee4193958f09928e2/distProbably not many people (if any?) will use the
.amd.jsbuild. Modern bundlers, and native ES Modules in browsers, will make use of the.esm.jsoutput. The.umd.jsoutput is what people use for the traditional global-style<script src="">tags.[-]Theme Color IE issue[/-][+]Theme Color IE issue (improve bundling, etc, for older browsers)[/+]jhildenbiddle commentedon Jun 3, 2020
Let's move the bundler conversation over to #1168.
jhildenbiddle commentedon Feb 5, 2022
Fixed in #1743