From bb256f2ec8647c646e4857b009c2067b0f22f1c0 Mon Sep 17 00:00:00 2001
From: "KimSia, Sim" <245021+simkimsia@users.noreply.github.com>
Date: Sat, 23 Jul 2022 14:42:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9BPrevent=20potential=20null=20elemen?=
 =?UTF-8?q?ts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

because {% component_js_dependencies %} loads all the components regardless
---
 README.md                                     | 10 ++++++----
 sampleproject/components/calendar/calendar.js |  4 +++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4f8bb69c..8b1bac24 100644
--- a/README.md
+++ b/README.md
@@ -220,7 +220,9 @@ Then you need a javascript file that specifies how you interact with this compon
 ```js
 /* In a file called [project root]/components/calendar/script.js */
 (function(){
-    document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!") }
+    if (document.querySelector(".calendar-component")) {
+        document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
+    }
 })()
 ```
 
@@ -336,13 +338,13 @@ Since the header block is unspecified, it's taken from the base template. If you
 
 As you can see, component slots lets you write reusable containers, that you fill out when you use a component. This makes for highly reusable components, that can be used in different circumstances.
 
-If you want to include a slot's default content while adding additional content, you can call `slot.super` to insert the base content, which works similarly to `block.super`.  
+If you want to include a slot's default content while adding additional content, you can call `slot.super` to insert the base content, which works similarly to `block.super`.
 
 ```htmldjango
 {% component_block "calendar" date="2020-06-06" %}
     {% slot "body" %}{{ slot.super }}. Have a great day!{% endslot %}
 {% endcomponent_block %}
-``` 
+```
 
 Produces:
 
@@ -367,7 +369,7 @@ By default, components can access context variables from the parent template, ju
 
 NOTE: `{% csrf_token %}` tags need access to the top-level context, and they will not function properly if they are rendered in a component that is called with the `only` modifier.
 
-Components can also access the outer context in their context methods by accessing the property `outer_context`. 
+Components can also access the outer context in their context methods by accessing the property `outer_context`.
 
 
 # Available settings
diff --git a/sampleproject/components/calendar/calendar.js b/sampleproject/components/calendar/calendar.js
index d1c25110..751f4dff 100644
--- a/sampleproject/components/calendar/calendar.js
+++ b/sampleproject/components/calendar/calendar.js
@@ -1,3 +1,5 @@
 (function(){
-    document.querySelector(".calendar-component").onclick = function(){alert("Clicked calendar!")}
+    if (document.querySelector(".calendar-component")) {
+        document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
+    }
 })()
\ No newline at end of file