Feature: option to inline js and css files #39

gnosticdev · 2023-05-08T03:16:05Z

I had to make a few small changes for my use case that bundled all resources into a single html file without external references, and thought it might be a useful option to others.

Changes:

added optional inline property to HTMLFileConfiguration.
modified injectFiles function to first check inline property before adding attributes/appending to body.
injectFiles now async to allow fs.promises to be used for inlining.
if js file is inlined = true, the script tag will not have any attributes, only contents of the js file.
if css file is inlined, the link tag is replaced with a style tag containing the contents of the css file.
added JSDoc comments to HTMLFileConfiguration.
updated README with inline option

new inline property added to HTMLFileConfiguration:

 inline?: boolean | { js?: boolean; css?: boolean }

Examples

No inline for js (default):

<body>
    <div id="container"></div>
    <script src="index.js" defer=""></script>
</body>

inline js file:

<body>
    <div id="container"></div>
    <script>
        // index.js
        (() => {
            const content = "hi mom"
            document.getElementById("container").innerText = content
        })()
    </script>
</body>

No inline for css file (default)

<head>
    <link rel="stylesheet" href="style.css">
</head>

inline css file:

<head>
    <style>
        /* style.css */
        body {
            background-color: blue;
        }
    </style>
</head>

- added optional inline property to HTMLFileConfiguration. - if js is inlined, the script tag will not have any attributes, only contents of the js file. - if css is inlined, the link tag is replaced with a style tag containing the contents of the css file. - added JSDoc comments to HTMLFileConfiguration. - made injectFiles function async to allow fs.promises to be used for inlining. - updated README with inline option

craftamap

Thanks for this PR - such a cool feature!

I left some minor comments, but overall it looks quite good!

lib/cjs/index.d.ts

src/index.ts

index.d.ts: - Added semi colons back to index.d.ts index.ts: - Removed params from isInline function - Added logInfo to console.log

gnosticdev · 2023-06-05T00:19:51Z

Glad you found it useful! Issues should be resolved now.

Thanks!

craftamap · 2023-06-06T14:42:28Z

Looks good now! I will do a release including this soon-ish

craftamap reviewed May 31, 2023

View reviewed changes

lib/cjs/index.d.ts Outdated Show resolved Hide resolved

src/index.ts Outdated Show resolved Hide resolved

src/index.ts Outdated Show resolved Hide resolved

src/index.ts Show resolved Hide resolved

Updates per PR craftamap#39 comments:

1360c81

index.d.ts: - Added semi colons back to index.d.ts index.ts: - Removed params from isInline function - Added logInfo to console.log

craftamap merged commit 9a99147 into craftamap:master Jun 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: option to inline js and css files #39

Feature: option to inline js and css files #39

gnosticdev commented May 8, 2023

craftamap left a comment

gnosticdev commented Jun 5, 2023

craftamap commented Jun 6, 2023

Feature: option to inline js and css files #39

Feature: option to inline js and css files #39

Conversation

gnosticdev commented May 8, 2023

Changes:

Examples

No inline for js (default):

inline js file:

No inline for css file (default)

inline css file:

craftamap left a comment

Choose a reason for hiding this comment

gnosticdev commented Jun 5, 2023

craftamap commented Jun 6, 2023