Reworked integrations (#1581)

* Reworked Angular integration

* Reworked React integration

* Reworked Vue integration

* Reworked Django integration

* Reworked Remix integration

* Reworked Svelte integration

* Reworked Express integration

* Reworked Laravel integration

* Reworked Next integration

* Reworked Nuxt integration

* Reworked Solid integration

* Typos fixes

site/content/docs/standard/integrations/angular/index.html

@@ -200,40 +200,22 @@ <h2 class="text-lg font-bold">Step 4</h2>
         {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
   </div>
-  <!-- Section: Code-->
 
   <h2 class="text-lg font-bold">Step 5</h2>
   <p class="mb-5">
-    In root directory add <code>typings.d.ts</code> file and put in there
-    Tailwind Elements module's declarataion.
-  </p>
-
-  <div class="pb-4">
-    <!--prettier-ignore-->
-    {{< twsnippet/wrapper "typings.d.ts" "" "mobile" >}}
-        {{< twsnippet/code active=true lang="JavaScript" >}}
-        declare module 'tw-elements';
-        {{< /twsnippet/code >}}
-        {{< /twsnippet/wrapper >}}
-  </div>
-
-  <h2 class="text-lg font-bold">Step 6</h2>
-  <p class="mb-5">
-    In <code>app.component.ts</code> file (located in
-    <code>src/app/</code> directory) put lifecycle method where are you going to
-    dynamically importing library.
+    Import components which are you intend to use and necessary function
+    <code>initTE</code>. Initialize <code>initTE</code> in a lifecycle method.
   </p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
         {{< twsnippet/code active=true lang="JavaScript" >}}
+        import { Datepicker, Input, initTE } from "tw-elements";
+
         ngOnInit() {
-            const importTE = async () => {
-              await import('tw-elements');
-            };
-            importTE();
-          }
+          initTE({ Datepicker, Input });
+        }
         {{< /twsnippet/code >}}
         {{< /twsnippet/wrapper >}}
   </div>
@@ -258,29 +240,30 @@ <h2 class="text-lg font-bold">Step 6</h2>
   </p>
 
   <h2 class="text-lg font-bold">Step 1</h2>
-  <p class="mb-5">Import library.</p>
+  <p class="mb-5">Import components which are you intend to use.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
-        import * as te from "tw-elements";
+        import { Datepicker, Input } from "tw-elements";
       {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 
   <h2 class="text-lg font-bold">Step 2</h2>
-  <p class="mb-5">Initialize component in lifecycle hook.</p>
+  <p class="mb-5">Initialize components in lifecycle hook.</p>
 
   <div class="pb-4">
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "app.component.ts" "" "mobile" >}}
       {{< twsnippet/code active=true lang="JavaScript" >}}
         ngOnInit() {
+          const myInput = new Input(document.getElementById("myDatepicker"));
           const options = {
             format: "dd-mm-yyyy",
           };
-          const myDatepicker = new te.Datepicker(
+          const myDatepicker = new Datepicker(
             document.getElementById("myDatepicker"),
             options
           );

site/content/docs/standard/integrations/django/index-ss.html

@@ -12,3 +12,6 @@
     >Installing and configuring Tailwind CSS and Tailwind Elements</a
   >
 </li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-initializing-js">Initializing via JS</a>
+</li>

site/content/docs/standard/integrations/django/index.html

@@ -285,7 +285,7 @@ <h2 class="text-lg font-bold">Step 6</h2>
     {{< twsnippet/wrapper "home.html" "" "mobile" >}}
         {{< twsnippet/code active=true lang="HTML" >}}
     <script
-      src="{% static 'tw-elements/dist/js/index.min.js' %}"
+      src="{% static 'tw-elements/dist/js/tw-elements.umd.min.js' %}"
       type="text/javascript"></script>
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
@@ -350,9 +350,47 @@ <h2 class="text-lg font-bold">Step 9</h2>
     <!--prettier-ignore-->
     {{< twsnippet/wrapper "home.html" "" "mobile" >}}
         {{< twsnippet/code active=true lang="HTML" >}}
-    <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
     {{< /twsnippet/code >}}
     {{< /twsnippet/wrapper >}}
   </div>
 </section>
 <!--/Creating and configuring Tailwind & Tailwind Elements-->
+
+<!--Initializing via JS-->
+<section id="section-initializing-js">
+  <!-- Title -->
+  <h2
+    class="mb-5 mt-0 text-3xl font-semibold leading-normal"
+    id="initializing-js"
+    data-te-spy-item>
+    Initializing via JS
+  </h2>
+
+  <!-- Description -->
+  <p class="mb-5">
+    By default all components have autoinit which means they are initialized by
+    data attributes. But if you want to make init by JavaScript - there is also
+    possibility to do that.
+  </p>
+
+  <h2 class="text-lg font-bold">Step 1</h2>
+  <p class="mb-5">Initialize components in <code>script</code> section.</p>
+
+  <div class="pb-4">
+    <!--prettier-ignore-->
+    {{< twsnippet/wrapper "home.html" "" "mobile" >}}
+      {{< twsnippet/code active=true lang="JavaScript" >}}
+          const myInput = new te.Input(document.getElementById("myDatepicker"));
+          const options = {
+            format: "dd-mm-yyyy",
+          };
+          const myDatepicker = new te.Datepicker(
+            document.getElementById("myDatepicker"),
+            options
+          );
+      {{< /twsnippet/code >}}
+    {{< /twsnippet/wrapper >}}
+  </div>
+</section>
+<!--/Initializing via JS-->

site/content/docs/standard/integrations/express/index-ss.html

@@ -12,3 +12,6 @@
     >Installing and configuring Tailwind CSS and Tailwind Elements</a
   >
 </li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
+  <a href="#section-initializing-js">Initializing via JS</a>
+</li>