Export ThemeConfig and writeDarkSwitch

[slaweet]

This change allows that ThemeConfig and writeDarkSwitch can be imported in a project that uses bootstrap-darkmode by

import { ThemeConfig, writeDarkSwitch } from 'bootstrap-darkmode/theme';

I'm probably missing something, because from the README With NPM/Yarn/PNPM section I don't see how the import could work. The above code snippet, is how I would expect this to work.

One further step would be to rename theme.ts to index.ts, so that the import can be just [...] from 'bootstrap-darkmode'. But I didn't want to go that far, since I feel like I'm missing some context here.

I'm not familiar with how https://unpkg.com/ works, so please make sure this change doesn't break https://unpkg.com/

[Clashsoft]

I used to have export, but removed it in 54a67e3932da87f6b5b86086d35941ce043eb7b4. Indeed because I couldn't figure out how to make it work with unpkg.com. Script tags + unpkg.com are the primary way of using this library anyway. Since the JavaScript doesn't do a lot of magic, you might as well just replicate its behaviour in whatever framework you are using. For Angular, there is ng-bootstrap-angular.

[slaweet]

@Clashsoft Thank you for the explanation. I'll try a bit find a way to make it work in both, but I don't have too high hopes knowing you tried already :slightly_smiling_face:

[Clashsoft]

I played around a bit today, and found that I could put "module": "UMD" in tsconfig.json to make it generate a UMD module. Unfortunately that is not browser compatible for some reason (https://github.com/microsoft/TypeScript/issues/8436). A workaround would be two tsconfig.json, one for the browser and the other with UMD, and just call tsc twice in the build script. In addition, one would probably want a ESModule as an .mjs file...

[Clashsoft]

I like the idea of index.ts. Maybe it could be just this:

export * from 'theme`;

But going that route, it may be desirable to put ThemeConfig in theme-config.ts and writeDarkSwitch in dark-switch.ts.

[slaweet]

I played around a bit today, and found that I could put "module": "UMD" in tsconfig.json to make it generate a UMD module. Unfortunately that is not browser compatible for some reason (microsoft/TypeScript#8436). A workaround would be two tsconfig.json, one for the browser and the other with UMD, and just call tsc twice in the build script. In addition, one would probably want a ESModule as an .mjs file...

I tried different values of module tsconfig, including UMD, but none of them produces theme.js with globally defined ThemeConfig and writeDarkSwitch (if they are exported) that would work when loaded with script tag in a browser (as with unpkg). :slightly_frowning_face:

I like the idea of index.ts. Maybe it could be just this:

export * from 'theme`;

But going that route, it may be desirable to put ThemeConfig in theme-config.ts and writeDarkSwitch in dark-switch.ts.

This would be nice, assuming there is a solution to the exports problem described above.

[Clashsoft]

I've been playing around with ng-packagr for bundling the JavaScript in different module formats. Here's what's in the package using that:

.
|-- CHANGELOG.md
|-- README.md
|-- bootstrap-darkmode.d.ts
|-- bootstrap-darkmode.metadata.json
|-- bundles
|   |-- bootstrap-darkmode.umd.js
|   |-- bootstrap-darkmode.umd.js.map
|   |-- bootstrap-darkmode.umd.min.js
|   `-- bootstrap-darkmode.umd.min.js.map
|-- css
|   |-- darktheme.css
|   `-- darktheme.css.map
|-- esm2015
|   |-- bootstrap-darkmode.js
|   |-- lib
|   |   |-- dark-switch.js
|   |   `-- theme-config.js
|   `-- public_api.js
|-- fesm2015
|   |-- bootstrap-darkmode.js
|   `-- bootstrap-darkmode.js.map
|-- lib
|   |-- dark-switch.d.ts
|   `-- theme-config.d.ts
|-- package.json
|-- public_api.d.ts
`-- scss
    `-- darktheme.scss

Usage in browser is then:

<script src="dist/bundles/bootstrap-darkmode.umd.min.js"></script>
<script>
    const BootstrapDarkmode = window['bootstrap-darkmode'];
    const themeConfig = new BootstrapDarkmode.ThemeConfig();
    themeConfig.initTheme();
</script>