parcel-plugin-gas-imports

1.0.3 • Public • Published

parcel-plugin-gas-imports

Version License: MIT Twitter: VladoDev

🔥 Parcel plugin that enables bundling of Google App Script HTML.

📚 Introduction

If you've ever developed an add-on for Google's Office Suite with Google Apps Script, then you'll know how inefficient it is to develop your add-on's UI. This is because Google's Apps Script supports only .gs and .html files. If you want to use CSS and JS, the only option is to create an HTML file and wrap your CSS code inside <style> tag or your JS inside <script> tag and include it in your UI using scriptlets.

This approach has serious flaws. Parcel (nor any other modern JS bundler for that matter), doesn't recognize scriptlets <?!= ?>. Because of this, it won't apply any code transformation to those files and won't bundle them.

Why is this approach bad?

  • 🚫 CSS not prefixed (The UI breaks on some browsers)
  • 🚫 JS not transpiled (Usage of modern JS not possible)
  • 🚫 Code can't be split in modules
  • 💣 Large file sizes (Code not minified)

📦 Installation

# Installs the plugin and saves it as a development dependency 
npm i parcel-plugin-gas-imports -D

☁️ Usage

The plugin allows you to include your JS and CSS just like you would normally do it in HTML:

# Example add-on UI files 
src
├── index.html
├── style.css
└── script.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
 
  <body>
    <h1>Google Apps Script Sidebar</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script src="script.js"></script> 
  </body>
</html>

🚀 Build

parcel build src/index.html

# Fully optimized project ready for deployment 
dist
├── index.html
├── style.e308ff8e.css.html
└── script.75da7f30.js.html

ℹ️ NOTE: If you want to prevent this plugin from running in certain cases you can set PARCEL_PLUGIN_GAS_IMPORTS=false environment variable.

✨ Run tests

The plugin uses Jest for running tests.

Jest will execute all .test.js files in the test folder.

npm test

👨 Author

Vladimir Mikulic

🤝 Contributing

Contributions, issues and feature requests are welcome!

📝 License

This project is licensed under MIT license.

👨‍🚀 Show your support

Give a ⭐️ if this project helped you!

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.3
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.3
    1
  • 1.0.2
    0
  • 1.0.1
    0
  • 1.0.0
    0

Package Sidebar

Install

npm i parcel-plugin-gas-imports

Weekly Downloads

1

Version

1.0.3

License

MIT

Unpacked Size

10.8 kB

Total Files

10

Last publish

Collaborators

  • vladimirmikulic