Feature: lazy translations

.github/workflows/coding-style.yml

@@ -0,0 +1,30 @@
+name: Coding style
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - v*
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  eslint:
+    name: Eslint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Eslint
+        run: npm run eslint

.github/workflows/release-package.yml

@@ -0,0 +1,94 @@
+name: Release package
+
+on:
+  workflow_dispatch:
+    inputs:
+      release-type:
+        description: 'Release type (one of): patch, minor, major, prepatch, preminor, premajor, prerelease'
+        required: true
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Git configuration
+        run: |
+          git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "GitHub Actions"
+
+      - name: Bump release version
+        if: startsWith(github.event.inputs.release-type, 'pre') != true
+        run: |
+          echo "NEW_VERSION=$(npm --no-git-tag-version version $RELEASE_TYPE)" >> $GITHUB_ENV
+          echo "RELEASE_TAG=latest" >> $GITHUB_ENV
+        env:
+          RELEASE_TYPE: ${{ github.event.inputs.release-type }}
+
+      - name: Bump pre-release version
+        if: startsWith(github.event.inputs.release-type, 'pre')
+        run: |
+          echo "NEW_VERSION=$(npm --no-git-tag-version --preid=beta version $RELEASE_TYPE)" >> $GITHUB_ENV
+          echo "RELEASE_TAG=beta" >> $GITHUB_ENV
+        env:
+          RELEASE_TYPE: ${{ github.event.inputs.release-type }}
+
+      - name: Build dist
+        run: npm run build:prod
+
+      - name: Update changelog
+        uses: superfaceai/release-changelog-action@v1
+        if: startsWith(github.event.inputs.release-type, 'pre') != true
+        with:
+          path-to-changelog: CHANGELOG.md
+          version: ${{ env.NEW_VERSION }}
+          operation: release
+
+      - name: 'Commit CHANGELOG.md, package.json, package-lock.json and dist changes and create tag'
+        run: |
+          git add "package.json"
+          git add "package-lock.json"
+          git add "dist/"
+          git add "CHANGELOG.md"
+          git commit -m "chore: release ${{ env.NEW_VERSION }}"
+          git tag ${{ env.NEW_VERSION }}
+
+      - name: Publish
+        run: npm publish --verbose --access public --tag ${{ env.RELEASE_TAG }}
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPMJS_ACCESS_TOKEN }}
+
+      - name: Push changes to repository
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          git push origin && git push --tags
+
+      - id: get-changelog
+        name: Get version changelog
+        uses: superfaceai/release-changelog-action@v1
+        if: startsWith(github.event.inputs.release-type, 'pre') != true
+        with:
+          path-to-changelog: CHANGELOG.md
+          version: ${{ env.NEW_VERSION }}
+          operation: read
+
+      - name: Update GitHub release documentation
+        uses: softprops/action-gh-release@v1
+        with:
+          tag_name: ${{ env.NEW_VERSION }}
+          body: ${{ steps.get-changelog.outputs.changelog }}
+          prerelease: ${{ startsWith(github.event.inputs.release-type, 'pre') }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -7,6 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Upgrade instructions
+
+- Update the GTM template.
+- Consider rewriting event listeners to events of the `CookieConsentWrapper` object via variable `window.cookieConsentWrapperEvents`. For more information follow [the documentation](https://github.com/68publishers/cookie-consent/blob/v1.0.0/README.md#accessing-the-wrapper-in-the-javascript).
+
+### Added
+
+- Added safe `CookieConsentWrapper` events attaching via window variable `window.cookieConsentWrapperEvents`.
+- DX: Added Eslint.
+- DX: Added GitHub Actions.
+
+### Changed
+
+- Default translations are loaded dynamically based on the settings in the GTM "Locales" field.
+- Added ability to load custom default translations in `.json` and `.js` format.
+- Reduced compiled cookie-consent script size.
+- Updated GTM template.
+- Updated README.
+- DX: Rewritten from CommonJS to ESM.
+
 ## [0.5.3] - 2024-05-10
 
 ### Added
@@ -340,7 +360,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - The first version of the package has been released.
 
-[unreleased]: https://github.com/68publishers/cookie-consent/compare/v0.5.2...HEAD
+[unreleased]: https://github.com/68publishers/cookie-consent/compare/v0.5.3...HEAD
+[0.5.3]: https://github.com/68publishers/cookie-consent/compare/v0.5.2...v0.5.3
 [0.5.2]: https://github.com/68publishers/cookie-consent/compare/v0.5.1...v0.5.2
 [0.5.1]: https://github.com/68publishers/cookie-consent/compare/v0.5.0...v0.5.1
 [0.5.0]: https://github.com/68publishers/cookie-consent/compare/v0.4.8...v0.5.0

README.md

@@ -147,7 +147,14 @@ The package comes with the default translations for the following languages:
 - [Ukrainian - uk](src/resources/translations/ua.json)
 
 Translations that will be loaded and accessible for the widget are taken from the field `Locales`. Each locale must be defined on a new line.
-If you want to rewrite default translations or you want to add translations for a new locale then you can define them in a table `Translations`.
+Alternatively, from version `1.0.0`, the URL from which the translations are to be downloaded can also be entered.
+
+<img src="docs/images/locale-options.png" alt="Locale options" width="600">
+
+In the example above, the default translations for the English language are downloaded and the translations for the German language are downloaded from the URL `https://www.example.com/public/cc-translations/de.json`.
+A translation file must always be in JSON format and its name must match a locale.
+
+If you want to rewrite default translations, or you want to add translations for a new locale then you can define them in a table `Translations`.
 
 ### Locale detection
 
@@ -268,48 +275,58 @@ And a tag that is fired with the trigger:
 ## Accessing the wrapper in the JavaScript
 
 The wrapper is accessible in the `window` under the name `CookieConsentWrapper`. The recommended way how to manipulate with it is through event callbacks because the wrapper may not be fully initialized at the time your script is executed.
-Callbacks are attached with calling of the method `CookieConsentWrapper.on()`.
+Callbacks are attached with calling of the method `CookieConsentWrapper.on()`, however since the version `1.0.0` the preferred method is to use the `window.cookieConsentWrapperEvents` variable.
+
+The use of the variable avoids the situation when the wrapper does not exist in the window yet.
 
 ### Init event
 
 A callback is invoked when the wrapper is fully initialized or directly if everything has been already initialized.
 
 ```html
 <script>
-    CookieConsentWrapper.on('init', function () {
+    window.cookieConsentWrapperEvents = window.cookieConsentWrapperEvents || [];
+
+    window.cookieConsentWrapperEvents.push(['init', function () {
         if (CookieConsentWrapper.allowedCategory('analytics_storage')) {
             // check if the analytics_storage is granted
         }
 
         CookieConsentWrapper.unwrap(); // get the original cookie consent plugin
-    });
+    }]);
 </script>
 ```
 
 ### Consent events
 
 ```html
 <script>
-    CookieConsentWrapper.on('consent:first-action', function (consent) {
+    window.cookieConsentWrapperEvents = window.cookieConsentWrapperEvents || [];
+
+    window.cookieConsentWrapperEvents.push(['consent:first-action', function (consent) {
         // called on the first user's action
-    });
-    CookieConsentWrapper.on('consent:accepted', function (consent) {
-      // called on every page load after the first user's action
-    });
-    CookieConsentWrapper.on('consent:changed', function (consent, changedCategories) {
-      // called when preferences changed
-    });
+    }]);
+
+    window.cookieConsentWrapperEvents.push(['consent:accepted', function (consent) {
+        // called on every page load after the first user's action
+    }]);
+
+    window.cookieConsentWrapperEvents.push(['consent:changed', function (consent, changedCategories) {
+        // called when preferences changed
+    }]);
 </script>
 ```
 
 ### Locale event
 
 ```html
 <script>
-    CookieConsentWrapper.on('locale:change', function (locale) {
+    window.cookieConsentWrapperEvents = window.cookieConsentWrapperEvents || [];
+
+    window.cookieConsentWrapperEvents.push(['locale:change', function (locale) {
         // called when the plugin locale is changed through method `CookieConsentWrapper.changeLocale()`
         console.log(locale + '!');
-    });
+    }]);
 
     // ...
 
@@ -408,10 +425,10 @@ $ npm run build:dev # or prod
 ```
 
 Paths of output files are:
- - `~/build/cookie-consent.js` (dev mode)
+ - `~/demo/cookie-consent.js` (dev mode)
  - `~/dist/cookie-consent.min.js` (production mode)
 
-A simple demo page without real GTM is located in `~/build/index.html`. To show the demo in your browser run:
+A simple demo page without real GTM is located in `~/demo/index.html`. To show the demo in your browser run:
 
 ```sh
 $ npm run start:dev