Adding commonJS support

Gruntfile.js

@@ -1,6 +1,6 @@
 const fs = require('fs');
 
-function prepareFinalFile(content, stripAllImport = true, stripAllExport = true) {
+function prepareFinalFile(content, stripAllImport = true, stripAllExport = true, transformToCommonJS = false) {
   // remove TimeZones iCal Library version output (do not do this, if your are using the time zone library standalone!)
   content = content.replace(/^console\.log\('Add to Calendar TimeZones iCal Library loaded \(version ' \+ tzlibVersion \+ '\)'\);$/m, '');
   // add style inline
@@ -39,9 +39,17 @@ function prepareFinalFile(content, stripAllImport = true, stripAllExport = true)
     // remove all export statements
     content = content.replace(/^export {[\w\s-_,]*};/gim, '');
   }
+  if (transformToCommonJS) {
+    content = content
+      .replace(/tzlib_get_offset/gm, 'tzlibActions.tzlib_get_offset')
+      .replace(/tzlib_get_ical_block/gm, 'tzlibActions.tzlib_get_ical_block')
+      .replace(/tzlib_get_timezones/gm, 'tzlibActions.tzlib_get_timezones');
+  }
   return content;
 }
 
+const jsCoreFilesToCombine = ['src/atcb-globals.js', 'src/atcb-decorate.js', 'src/atcb-validate.js', 'src/atcb-control.js', 'src/atcb-generate.js', 'src/atcb-generate-rich-data.js', 'src/atcb-links.js', 'src/atcb-util.js', 'src/atcb-event.js', 'src/atcb-i18n.js', 'src/atcb-init.js'];
+
 // The config.
 module.exports = function (grunt) {
   grunt.initConfig({
@@ -97,20 +105,7 @@ module.exports = function (grunt) {
     // generate the distributable JavaScript files (and also add a customized css file to the demo)
     concat: {
       main: {
-        src: [
-          'node_modules/timezones-ical-library/dist/tzlib.js',
-          'src/atcb-globals.js',
-          'src/atcb-decorate.js',
-          'src/atcb-validate.js',
-          'src/atcb-control.js',
-          'src/atcb-generate.js',
-          'src/atcb-generate-rich-data.js',
-          'src/atcb-links.js',
-          'src/atcb-util.js',
-          'src/atcb-event.js',
-          'src/atcb-i18n.js',
-          'src/atcb-init.js',
-        ],
+        src: ['node_modules/timezones-ical-library/dist/tzlib.js', ...jsCoreFilesToCombine],
         // uncomment the following line instead of the line after (and also at line 161) that to additionally create a atcb script, which is not minified
         //dest: 'dist/atcb-unminified.js',
         dest: 'dist/atcb.js',
@@ -120,7 +115,7 @@ module.exports = function (grunt) {
         },
       },
       module: {
-        src: ['src/atcb-globals.js', 'src/atcb-decorate.js', 'src/atcb-validate.js', 'src/atcb-control.js', 'src/atcb-generate.js', 'src/atcb-generate-rich-data.js', 'src/atcb-links.js', 'src/atcb-util.js', 'src/atcb-event.js', 'src/atcb-i18n.js', 'src/atcb-init.js'],
+        src: jsCoreFilesToCombine,
         dest: 'dist/module/index.js',
         options: {
           stripBanners: true,
@@ -129,6 +124,16 @@ module.exports = function (grunt) {
           process: (content) => prepareFinalFile(content, true, true),
         },
       },
+      commonJS: {
+        src: jsCoreFilesToCombine,
+        dest: 'dist/commonjs/index.js',
+        options: {
+          stripBanners: true,
+          banner: "// eslint-disable-next-line @typescript-eslint/no-var-requires\r\nconst tzlibActions = require('timezones-ical-library');\r\n",
+          footer: 'module.exports = { atcb_action };',
+          process: (content) => prepareFinalFile(content, true, true, true),
+        },
+      },
       cssDemo: {
         src: ['assets/css/atcb.css'],
         dest: 'demo/public/atcb.css',
@@ -145,6 +150,21 @@ module.exports = function (grunt) {
           done();
         },
       },
+      'package.json commonJS': {
+        'dist/commonjs/package.json': function (fs, fd, done) {
+          fs.writeSync(fd, '{ "type": "commonjs" }');
+          done();
+        },
+      },
+      '.eslintrc.json commonJS': {
+        'dist/commonjs/.eslintrc.json': function (fs, fd, done) {
+          fs.writeSync(
+            fd,
+            '{ "extends": "../../.eslintrc.json", "env": { "node": true }, "plugins": ["commonjs"] }'
+          );
+          done();
+        },
+      },
     },
     // minifies the main js file
     uglify: {

assets/css/atcb-3d.css

@@ -5,7 +5,7 @@
  *
  * Style: 3D
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb-date.css

@@ -5,7 +5,7 @@
  *
  * Style: Date
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb-flat.css

@@ -5,7 +5,7 @@
  *
  * Style: Flat
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb-neumorphism.css

@@ -5,7 +5,7 @@
  *
  * Style: Neumorphism
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb-round.css

@@ -5,7 +5,7 @@
  *
  * Style: Round
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb-text.css

@@ -5,7 +5,7 @@
  *
  * Style: Text
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

assets/css/atcb.css

@@ -5,7 +5,7 @@
  *
  * Style: Default
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

demo/public/atcb.css

@@ -5,7 +5,7 @@
  *
  * Style: Default
  *
- * Version: 2.0.2
+ * Version: 2.1.0
  * Creator: Jens Kuerschner (https://jenskuerschner.de)
  * Project: https://github.com/add2cal/add-to-calendar-button
  * License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

demo/src/components/FooterArea.vue

@@ -47,7 +47,7 @@ const { t, locale } = useI18n();
             </span>
             <div class="mt-6 text-xs sm:mt-5 md:mt-3">
               <span class="font-semibold text-zinc-500 dark:text-zinc-400"> &copy; {{new Date().getFullYear()}} </span>
-              <span class="lowercase text-zinc-400 dark:text-zinc-500"> , Current Version: 2.0.2 </span>
+              <span class="lowercase text-zinc-400 dark:text-zinc-500"> , Current Version: 2.1.0 </span>
             </div>
           </div>
           <div class="hidden self-center sm:block"><LightModeSwitch /></div>

demo/src/components/integration/GuideSidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CodeBracketIcon } from '@heroicons/vue/24/outline';
+import { CodeBracketIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline';
 import Angular from "@/components/logos/LogoAngular.vue";
 import Astro from "@/components/logos/LogoAstro.vue";
 import React from "@/components/logos/LogoReact.vue";
@@ -40,4 +40,9 @@ export default {
     <RouterLink v-else :to="{ name: 'home-i18n', hash: '#installation', params: { locale } }">{{ t('content.guide.sidebar.cta') }}</RouterLink>
   </p>
   <p>{{ t('content.guide.sidebar.explainer') }}</p>
+  <div class="mt-7 border-t border-zinc-300 pt-7 dark:border-zinc-700"></div>
+  <p>
+    {{ t('content.guide.sidebar.stackblitz') }}:
+    <a href="https://stackblitz.com/@add-to-calendar/collections/add-to-calendar-button-integration-examples" target="_blank" rel="noopener" class="whitespace-nowrap">{{ t('labels.clickHere') }} <ArrowTopRightOnSquareIcon class="mr-0.5 inline-block h-2.5 w-2.5" aria-hidden="true" /></a>.
+  </p>
 </template>

demo/src/i18n/locales/de.json

@@ -280,8 +280,8 @@
         "optimize_1": "Theoretisch war es das schon.",
         "optimize_2": "Vue funktioniert wunderbar mit Web Components.",
         "config_1": "Allerdings wirst du feststellen, dass die Anwendung in deiner Browser-Konsole eine Warnung wirft.",
-        "config_2": "Um diese aufzulösen musst du dem Compiler ein paar mehr Informationen über die",
-        "config_3": " mitgeben",
+        "config_2": "Um diese aufzulösen musst du dem Compiler ein paar mehr Informationen mitgeben.",
+        "config_3": "Dies geschieht tendenziell in der vite.config.js. Je nach Umgebung kannst du es aber auch an anderen Stellen integrieren. Prüfe hierzu die offizielle Vue Dokumentation",
         "config_4": "Für den Fall, dass der Add to Calendar Button der einzige Web Component in deinem Projekt ist, kannst du hierbei auch etwas konkreter werden.",
         "config_5": "Unsere Empfehlung wäre hier, Tags, die mit \"add-\" starten, pauschal als \"Custom Elements\" zu definieren."
       },
@@ -312,6 +312,7 @@
       "sidebar": {
         "framework": "Du nutzt Angular, React, Vue oder ein anderes Framework?",
         "tech_stack": "Nicht dein Tech-Stack?",
+        "stackblitz": "Entdecke mehr komplette Projekt-Beispiele auf Stackblitz",
         "cta": "Klicke hier für weitere Anleitungen!",
         "explainer": "Wir unterstützen alle großen Frontend-Stacks und viele weitere Umgebungen, wie bspw. WordPress."
       }

demo/src/i18n/locales/en.json

@@ -280,8 +280,8 @@
         "optimize_1": "Theoretically, this was already it.",
         "optimize_2": "Vue works extremely well with Web Components.",
         "config_1": "However, you might notice a warning in the browser console.",
-        "config_2": "To get rid of this, you need to provide a little bit more information to the compiler options at your",
-        "config_3": "",
+        "config_2": "To get rid of this, you need to provide a little bit more information to the compiler options.",
+        "config_3": "This can go into your vite.config.js or other places depending on your setup. Check the official Vue documentation for more details",
         "config_4": "In case the Add to Calendar Button is the only Web Component in your project, you could also be a little bit more explicit here.",
         "config_5": "In this case, our recommendation is to define tags, which start with \"add-\" as \"custom elements\"."
       },
@@ -312,6 +312,7 @@
       "sidebar": {
         "framework": "You are using Angular, React, Vue, or other frameworks?",
         "tech_stack": "Not your tech stack?",
+        "stackblitz": "Find complete project examples per stack at Stackblitz",
         "cta": "Check out the \"Installation\" section!",
         "explainer": "We have strong guides and solutions for all big frontend stacks as well things like WordPress."
       }

demo/src/views/GuideVueView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { watch } from 'vue';
+import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline';
 import CodeBlock from "@/components/CodeBlock.vue";
 import NextSteps from "@/components/integration/NextSteps.vue";
 import GuideSidebar from "@/components/integration/GuideSidebar.vue";
@@ -45,7 +46,11 @@ watch(locale, value => {
         </p>
         <p>
           {{ t('content.guide.vue.config_1') }}<br />
-          {{ t('content.guide.vue.config_2') }} <span class="font-semibold italic">vite.config.js</span>{{ t('content.guide.vue.config_3') }}.
+          {{ t('content.guide.vue.config_2') }}
+        </p>
+        <p>
+          {{ t('content.guide.vue.config_3') }}:
+          <a href="https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue" target="_blank" rel="noopener" class="whitespace-nowrap">{{ t('labels.clickHere') }} <ArrowTopRightOnSquareIcon class="-mt-0.5 mr-0.5 inline-block h-4 w-4" aria-hidden="true" /></a>.
         </p>
         <CodeBlock language="javascript" class="line-numbers">
           <pre>

package.json

@@ -1,12 +1,12 @@
 {
   "name": "add-to-calendar-button",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "engines": {
     "node": ">=16.18.1",
     "npm": ">=8.19.2"
   },
   "description": "A convenient JavaScript snippet, which lets you create beautiful buttons, where people can add events to their calendars.",
-  "main": "dist/module/index.js",
+  "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",
   "files": [
     "dist",
@@ -16,6 +16,12 @@
     "CHANGELOG.md",
     ".npmignore"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/module/index.js",
+      "require": "./dist/commonjs/index.js"
+    }
+  },
   "types": "index.d.ts",
   "jsdelivr": "./dist/atcb.js",
   "repository": {

src/atcb-control.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-decorate.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-event.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-generate-rich-data.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-generate.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-i18n.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-init.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-links.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)

src/atcb-util.js

@@ -3,7 +3,7 @@
  *  Add to Calendar Button
  *  ++++++++++++++++++++++
  *
- *  Version: 2.0.2
+ *  Version: 2.1.0
  *  Creator: Jens Kuerschner (https://jenskuerschner.de)
  *  Project: https://github.com/add2cal/add-to-calendar-button
  *  License: Elastic License 2.0 (ELv2) (https://github.com/add2cal/add-to-calendar-button/blob/main/LICENSE.txt)