Title", 200)]
40 |
41 | out = Template(
42 | "{% load react %}" '{% react_render component="Component" %}'
43 | ).render(self.mocked_context)
44 |
45 | self.assertFalse("{'html': " in out)
46 |
47 | @mock.patch("requests.post")
48 | def test_verify_rendition(self, mocked):
49 | "The SSR returns inner html"
50 |
51 | mocked.side_effect = [MockResponse("
", 200)]
52 |
53 | out = Template(
54 | "{% load react %}" '{% react_render component="Component" %}'
55 | ).render(self.mocked_context)
56 |
57 | self.assertTrue("
" in out)
58 |
59 | @mock.patch("requests.post")
60 | def test_request_body(self, mocked):
61 | "The SSR request sends the props in a expected way"
62 |
63 | mocked.side_effect = [MockResponse("
", 200)]
64 |
65 | person = Person(first_name="Tom", last_name="Waits")
66 |
67 | self.mocked_context["person"] = person
68 | self.mocked_context["component_data"] = {"album": "Real gone"}
69 |
70 | Template(
71 | "{% load react %}"
72 | '{% react_render component="Component" prop_person=person data=component_data %}' # NOQA
73 | ).render(self.mocked_context)
74 |
75 | request_body = {
76 | "componentName": "Component",
77 | "props": {
78 | "album": "Real gone",
79 | "person": {"first_name": "Tom", "last_name": "Waits"},
80 | },
81 | "context": {},
82 | }
83 |
84 | self.assertEqual(json.loads(mocked.call_args[1]["data"]), request_body)
85 |
86 | @mock.patch("requests.post")
87 | def test_request_body_context(self, mocked):
88 | "The SSR request sends the props in a expected way with context"
89 |
90 | mocked.side_effect = [MockResponse("
", 200)]
91 |
92 | movie = MovieWithContext(title="Office space", year=1991)
93 |
94 | self.mocked_context["movie"] = movie
95 | self.mocked_context["search_term"] = "Stapler"
96 |
97 | Template(
98 | "{% load react %}"
99 | '{% react_render component="Component" prop_movie=movie %}'
100 | ).render(self.mocked_context)
101 |
102 | request_body = {
103 | "componentName": "Component",
104 | "props": {
105 | "movie": {
106 | "title": "Office space",
107 | "year": 1991,
108 | "search_term": "Stapler",
109 | }
110 | },
111 | "context": {},
112 | }
113 |
114 | self.assertEqual(json.loads(mocked.call_args[1]["data"]), request_body)
115 |
116 | @mock.patch("requests.post")
117 | def test_request_body_with_ssr_context(self, mocked):
118 | "The SSR request appends the 'ssr_context' in an expected way"
119 |
120 | mocked.side_effect = [MockResponse("
", 200)]
121 |
122 | self.mocked_context["ssr_ctx"] = {"location": "http://localhost"}
123 |
124 | Template(
125 | "{% load react %}"
126 | '{% react_render component="Component" ssr_context=ssr_ctx %}'
127 | ).render(self.mocked_context)
128 |
129 | request_body = {
130 | "componentName": "Component",
131 | "props": {},
132 | "context": {"location": "http://localhost"},
133 | }
134 |
135 | self.assertEqual(json.loads(mocked.call_args[1]["data"]), request_body)
136 |
137 | @mock.patch("requests.post")
138 | def test_default_headers(self, mocked):
139 | "The SSR uses default headers with json as conten type"
140 | mocked.side_effect = [MockResponse("Foo Bar", 200)]
141 |
142 | Template("{% load react %}" '{% react_render component="Component" %}').render(
143 | self.mocked_context
144 | )
145 |
146 | headers = {
147 | "Content-type": "application/json",
148 | "Accept": "text/plain",
149 | }
150 |
151 | self.assertEqual(mocked.call_count, 1)
152 | self.assertEqual(mocked.call_args[1]["headers"], headers)
153 |
154 | @override_settings(REACT_RENDER_HEADERS={"Authorization": "Basic 123"})
155 | @mock.patch("requests.post")
156 | def test_custom_headers(self, mocked):
157 | "The SSR uses custom headers if present"
158 | mocked.side_effect = [MockResponse("Foo Bar", 200)]
159 |
160 | Template("{% load react %}" '{% react_render component="Component" %}').render(
161 | self.mocked_context
162 | )
163 |
164 | self.assertTrue(mocked.call_count == 1)
165 | self.assertEqual(mocked.call_args[1]["headers"]["Authorization"], "Basic 123")
166 |
167 | @mock.patch("requests.post")
168 | def test_hydrate_if_ssr_present(self, mocked):
169 | "Makes sure ReactDOM.hydrate is used when SSR is active"
170 | mocked.side_effect = [MockResponse("Foo Bar", 200)]
171 |
172 | out = Template(
173 | "{% load react %}"
174 | '{% react_render component="Component" %}'
175 | "{% react_print %}"
176 | ).render(self.mocked_context)
177 |
178 | self.assertTrue("ReactDOM.hydrate(" in out)
179 |
180 | @mock.patch("requests.post")
181 | def test_ssr_params_are_stored_in_component_queue(self, mocked):
182 | mocked.side_effect = [MockResponse("Foo Bar", 200)]
183 |
184 | Template("{% load react %}" '{% react_render component="Component" %}').render(
185 | self.mocked_context
186 | )
187 |
188 | queue = self.mocked_context["REACT_COMPONENTS"]
189 | self.assertTrue("ssr_params" in queue[0])
190 | self.assertEqual(queue[0]["ssr_params"], {})
191 |
192 |
193 | @override_settings(
194 | REACT_RENDER_HOST="http://react-service.dev/",
195 | )
196 | class SSRViewTest(SimpleTestCase):
197 | @mock.patch("django_react_templatetags.ssr.default.SSRService.load_or_empty")
198 | def test_that_disable_ssr_header_disables_ssr(self, mocked_func):
199 | self.client.get(
200 | reverse("static_react_view"),
201 | HTTP_X_DISABLE_SSR="1",
202 | )
203 | self.assertEqual(mocked_func.call_count, 0)
204 |
205 |
206 | @override_settings(
207 | REACT_RENDER_HOST="http://react-service.dev/batch",
208 | )
209 | class DefaultServiceTest(SimpleTestCase):
210 | @mock.patch("requests.post")
211 | def test_load_or_empty_returns_ok_data(self, mocked):
212 | mocked.side_effect = [MockResponse("Foo Bar", 200)]
213 |
214 | service = SSRService()
215 | resp = service.load_or_empty(
216 | {
217 | "json": "{}",
218 | "name": "App",
219 | }
220 | )
221 | self.assertTrue("html" in resp)
222 | self.assertTrue("Foo Bar" in resp["html"])
223 | self.assertTrue("params" in resp)
224 | params = resp["params"]
225 | self.assertEqual(params, {})
226 |
--------------------------------------------------------------------------------
/django_react_templatetags/tests/test_ssr_hypernova_service.py:
--------------------------------------------------------------------------------
1 | import logging
2 |
3 | from .mock_response import MockResponse
4 |
5 | try:
6 | from unittest import mock
7 | except ImportError:
8 | import mock
9 |
10 | from django.template import Context, Template
11 | from django.test import SimpleTestCase, override_settings
12 |
13 | from django_react_templatetags.ssr.hypernova import HypernovaService
14 | from django_react_templatetags.tests.demosite.models import MovieWithContext, Person
15 |
16 |
17 | @override_settings(
18 | REACT_RENDER_HOST="http://react-service.dev/batch",
19 | REACT_SSR_SERVICE="django_react_templatetags.ssr.hypernova.HypernovaService",
20 | )
21 | class HypernovaTemplateTest(SimpleTestCase):
22 | def setUp(self):
23 | self.mocked_context = Context({"REACT_COMPONENTS": []})
24 |
25 | @mock.patch("requests.post")
26 | def test_verify_404(self, mocked):
27 | "The SSR rendering falls back to client side rendering if 404"
28 |
29 | mocked.side_effect = [MockResponse({"error": "not found"}, 404, ok=False)]
30 |
31 | out = Template(
32 | "{% load react %}" '{% react_render component="Component" %}'
33 | ).render(self.mocked_context)
34 |
35 | self.assertTrue('
Title"),
42 | 200,
43 | )
44 | ]
45 |
46 | out = Template(
47 | "{% load react %}" '{% react_render component="Component" %}'
48 | ).render(self.mocked_context)
49 |
50 | self.assertFalse("{'html': " in out)
51 |
52 | @mock.patch("requests.post")
53 | def test_verify_rendition(self, mocked):
54 | "The SSR returns inner html"
55 |
56 | mocked.side_effect = [
57 | MockResponse(
58 | mock_hypernova_success_response("
Title
"),
59 | 200,
60 | )
61 | ]
62 |
63 | out = Template(
64 | "{% load react %}" '{% react_render component="Component" %}'
65 | ).render(self.mocked_context)
66 |
67 | self.assertTrue("
Title
" in out)
68 |
69 | @mock.patch("requests.post")
70 | def test_request_body(self, mocked):
71 | "The SSR request sends the props in a expected way"
72 |
73 | mocked.side_effect = [
74 | MockResponse(
75 | mock_hypernova_success_response("
Title
"),
76 | 200,
77 | )
78 | ]
79 |
80 | person = Person(first_name="Tom", last_name="Waits")
81 |
82 | self.mocked_context["person"] = person
83 | self.mocked_context["component_data"] = {"album": "Real gone"}
84 |
85 | Template(
86 | "{% load react %}"
87 | '{% react_render component="Component" prop_person=person data=component_data %}' # NOQA
88 | ).render(self.mocked_context)
89 |
90 | request_body = {
91 | "album": "Real gone",
92 | "person": {"first_name": "Tom", "last_name": "Waits"},
93 | }
94 | self.assertTrue("Component" in mocked.call_args[1]["json"])
95 | self.assertEqual(mocked.call_args[1]["json"]["Component"]["data"], request_body)
96 |
97 | @mock.patch("requests.post")
98 | def test_request_body_context(self, mocked):
99 | "The SSR request sends the props in a expected way with context"
100 |
101 | mocked.side_effect = [
102 | MockResponse(
103 | mock_hypernova_success_response("
Title
"),
104 | 200,
105 | )
106 | ]
107 |
108 | movie = MovieWithContext(title="Office space", year=1991)
109 |
110 | self.mocked_context["movie"] = movie
111 | self.mocked_context["search_term"] = "Stapler"
112 |
113 | Template(
114 | "{% load react %}"
115 | '{% react_render component="Component" prop_movie=movie %}'
116 | ).render(self.mocked_context)
117 |
118 | request_body = {
119 | "movie": {
120 | "title": "Office space",
121 | "year": 1991,
122 | "search_term": "Stapler",
123 | }
124 | }
125 |
126 | self.assertTrue("Component" in mocked.call_args[1]["json"])
127 | self.assertEqual(mocked.call_args[1]["json"]["Component"]["data"], request_body)
128 |
129 | @mock.patch("requests.post")
130 | def test_default_headers(self, mocked):
131 | "The SSR uses default headers with json as conten type"
132 | mocked.side_effect = [
133 | MockResponse(
134 | mock_hypernova_success_response("Foo Bar"),
135 | 200,
136 | )
137 | ]
138 |
139 | Template("{% load react %}" '{% react_render component="Component" %}').render(
140 | self.mocked_context
141 | )
142 |
143 | headers = {
144 | "Content-type": "application/json",
145 | "Accept": "text/plain",
146 | }
147 |
148 | self.assertEqual(mocked.call_count, 1)
149 | self.assertEqual(mocked.call_args[1]["headers"], headers)
150 |
151 | @override_settings(REACT_RENDER_HEADERS={"Authorization": "Basic 123"})
152 | @mock.patch("requests.post")
153 | def test_custom_headers(self, mocked):
154 | "The SSR uses custom headers if present"
155 | mocked.side_effect = [
156 | MockResponse(
157 | mock_hypernova_success_response("Foo Bar"),
158 | 200,
159 | )
160 | ]
161 |
162 | Template("{% load react %}" '{% react_render component="Component" %}').render(
163 | self.mocked_context
164 | )
165 |
166 | self.assertTrue(mocked.call_count == 1)
167 | self.assertEqual(mocked.call_args[1]["headers"]["Authorization"], "Basic 123")
168 |
169 | @mock.patch("requests.post")
170 | def test_ssr_params_are_stored_in_component_queue(self, mocked):
171 | mocked.side_effect = [
172 | MockResponse(
173 | mock_hypernova_success_response("Foo Bar"),
174 | 200,
175 | )
176 | ]
177 |
178 | Template("{% load react %}" '{% react_render component="Component" %}').render(
179 | self.mocked_context
180 | )
181 |
182 | queue = self.mocked_context["REACT_COMPONENTS"]
183 | self.assertTrue("ssr_params" in queue[0])
184 |
185 | ssr_params = queue[0]["ssr_params"]
186 | self.assertIn("hypernova_id", ssr_params)
187 | self.assertIn("hypernova_key", ssr_params)
188 |
189 | @mock.patch("requests.post")
190 | def test_only_ssr_html_are_returned_on_no_placeholder(self, mocked):
191 | mocked.side_effect = [
192 | MockResponse(
193 | mock_hypernova_success_response("Foo Bar"),
194 | 200,
195 | )
196 | ]
197 |
198 | out = Template(
199 | "{% load react %}"
200 | '{% react_render component="Component" no_placeholder=1 %}'
201 | ).render(self.mocked_context)
202 |
203 | queue = self.mocked_context["REACT_COMPONENTS"]
204 | self.assertEqual(len(queue), 1)
205 | self.assertFalse(out.startswith('
'
287 | "{}".format(key, id, body)
288 | + "
\n"
289 | + '"
293 | ) # NOQA
294 |
295 | return {
296 | "success": True,
297 | "error": None,
298 | "results": {
299 | component_name: {
300 | "name": component_name,
301 | "html": html,
302 | "meta": {},
303 | "duration": 0.279824,
304 | "statusCode": 200,
305 | "success": True,
306 | "error": None,
307 | }
308 | },
309 | }
310 |
--------------------------------------------------------------------------------
/docs/django-react-templatetags-logo.monopic:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frojd/django-react-templatetags/60cd4efa6b45d9b40adef2f1833a1ff01f6da859/docs/django-react-templatetags-logo.monopic
--------------------------------------------------------------------------------
/docs/example-multiple-components.md:
--------------------------------------------------------------------------------
1 | # Adding multiple components
2 |
3 | You can also have multiple components in the same template
4 |
5 | This view...
6 |
7 | ```python
8 | from django.shortcuts import render
9 |
10 | def menu_view(request):
11 | return render(request, 'myapp/index.html', {
12 | 'menu_data': {
13 | 'example': 1,
14 | },
15 | 'title_data': 'My title',
16 | 'footer_data': {
17 | 'credits': 'Copyright Company X'
18 | }
19 | })
20 | ```
21 |
22 | ... and this template:
23 |
24 | ```html
25 | {% load react %}
26 |
27 | ...
28 |
29 |
30 |
35 |
36 |
37 | {% react_print %}
38 |
39 | ```
40 |
41 | Will transform into this:
42 |
43 | ```html
44 |
45 | ...
46 |
47 |
48 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
60 |
69 |
70 |
79 |
80 |
89 |
90 | ```
91 |
--------------------------------------------------------------------------------
/docs/example-single-component.md:
--------------------------------------------------------------------------------
1 | # Single Component Example
2 |
3 | This view...
4 |
5 | ```python
6 | from django.shortcuts import render
7 |
8 | def menu_view(request):
9 | return render(request, 'myapp/index.html', {
10 | 'menu_data': {
11 | 'example': 1,
12 | },
13 | })
14 | ```
15 |
16 | ... and this template:
17 |
18 | ```html
19 | {% load react %}
20 |
21 | ...
22 |
23 |
24 |
27 |
28 |
29 | {% react_print %}
30 |
31 | ```
32 |
33 | Will transform into this:
34 |
35 | ```html
36 |
37 | ...
38 |
39 |
40 |
43 |
44 |
45 |
46 |
55 |
56 |
57 | ```
58 |
59 |
--------------------------------------------------------------------------------
/docs/examples.md:
--------------------------------------------------------------------------------
1 | # Example Applications
2 |
3 | ### [Django-react-polls - A fully React-rendered Django application with react-sass-starterkit](https://github.com/mikaelengstrom/django-react-polls-example/)
4 | A example app for a Django-meetup talk that showcases how to use DRTT with webpack. you might find the [slides on Slideshare](https://www.slideshare.net/Frojd/integrating-react-in-django-while-staying-sane-and-happy) helpful.
5 |
6 | ### [Django React Polls with Create React App and Hypernova](https://github.com/marteinn/django-react-polls-with-hypernova-examples)
7 | A fork of Django-React-Polls that includes working examples on how to implement Create React App and Hypernova with Django React Templatetags
8 |
--------------------------------------------------------------------------------
/docs/faq.md:
--------------------------------------------------------------------------------
1 | # FAQ
2 |
3 | ### How do I override the markup generated by `react_print`?
4 |
5 | Simple! Just override the template `react_print.html`
6 |
7 | ### This library only contains templatetags, where is the react js library?
8 |
9 | This library only covers the template parts (that is: placeholder and js render).
10 |
11 | ### I dont like the autogenerated element id, can I supply my own?
12 |
13 | Sure! Just add the param `identifier="yourid"` in `react_render`.
14 |
15 | Example:
16 | ```
17 | {% react_render component="Component" identifier="yourid" %}
18 | ```
19 |
20 | ...will print
21 | ```html
22 |
23 | ```
24 |
25 | ### How do I pass individual props?
26 |
27 | Add your props as arguments prefixed with `prop_*` to your `{% react_render ... %}`.
28 |
29 | Example:
30 | ```html
31 | {% react_render component="Component" prop_country="Sweden" prop_city="Stockholm" %}
32 | ```
33 |
34 | ...will give the component this payload:
35 | ```javascript
36 | React.createElement(Component, {"country": "Sweden", "city": "Stockholm"}),
37 | ```
38 |
39 | ### How do I apply my own css class to the autogenerated element?
40 |
41 | Add `class="yourclassname"` to your `{% react_render ... %}`.
42 |
43 | Example:
44 | ```html
45 | {% react_render component="Component" class="yourclassname" %}
46 | ```
47 |
48 | ...will print
49 | ```html
50 |
51 | ```
52 |
53 |
54 | ### Can I skip SSR on a certain request?
55 |
56 | Yup, just pass the header `HTTP_X_DISABLE_SSR` in your request and SSR will be skipped in that response.
57 |
58 |
59 | ### I want to pass the component name as a variable, is that possible?
60 |
61 | Yes! Just remove the string declaration and reference a variable in your `{% react_render ... %}`, the same way you do with `props`.
62 |
63 | Example:
64 |
65 | This view
66 |
67 | ```python
68 | render(request, 'myapp/index.html', {
69 | 'component_name': 'MegaMenu',
70 | })
71 | ```
72 |
73 | ...and this template
74 |
75 | ```html
76 | {% react_render component=component_name %}
77 | ```
78 |
79 | ...will print:
80 |
81 | ```html
82 |
83 | React.createElement(MegaMenu),
84 | ```
85 |
--------------------------------------------------------------------------------
/docs/getting-started.md:
--------------------------------------------------------------------------------
1 | # Getting started
2 |
3 | ### Requirements
4 |
5 | - Python 3.8+
6 | - Django 3.2, 5.0 and 4.2
7 |
8 |
9 | ### Installation
10 |
11 | Install the library with pip:
12 |
13 | ```
14 | $ pip install django_react_templatetags
15 | ```
16 |
17 |
18 | ### Adding to django
19 |
20 | Make sure `django_react_templatetags` is added to your `INSTALLED_APPS`.
21 |
22 | ```python
23 | INSTALLED_APPS = (
24 | # ...
25 | 'django_react_templatetags',
26 | )
27 | ```
28 |
29 | You also need to add the `react_context_processor` into the `context_middleware`:
30 |
31 | ```python
32 | TEMPLATES = [
33 | {
34 | 'BACKEND': 'django.template.backends.django.DjangoTemplates',
35 | 'DIRS': [
36 | 'templates...',
37 | ],
38 | 'APP_DIRS': True,
39 | 'OPTIONS': {
40 | 'debug': True,
41 | 'context_processors': [
42 | ...
43 | 'django_react_templatetags.context_processors.react_context_processor',
44 | ],
45 | },
46 | },
47 | ]
48 | ```
49 |
50 |
51 | ### Set up React/ReactDOM and expose your components
52 |
53 | There are various ways of compiling react and components, to many (and fast changing) to be included in these docs. The important thing is to make sure your javascript bundle exposes `ReactDOM` globally and of course your components.
54 |
55 |
56 | ### Connecting view and template
57 |
58 | This view...
59 |
60 | ```python
61 | from django.shortcuts import render
62 |
63 | def menu_view(request):
64 | return render(request, 'myapp/index.html', {
65 | 'menu_data': {
66 | 'example': 1,
67 | },
68 | })
69 | ```
70 |
71 | ... and this template:
72 |
73 | ```html
74 | {% load react %}
75 |
76 | ...
77 |
78 |
79 |
82 |
83 |
84 |
88 | {% react_print %}
89 |
90 | ```
91 |
92 | Will transform into this:
93 |
94 | ```html
95 |
96 | ...
97 |
98 |
99 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
117 |
118 | ```
119 |
--------------------------------------------------------------------------------
/docs/server-side-rendering.md:
--------------------------------------------------------------------------------
1 | # Server Side Rendering
2 |
3 | This library supports two SSR services, Hypernova and Hastur.
4 |
5 | ## Hypernova
6 |
7 |
8 | ### Installing
9 |
10 | (We assume you got a working Hypernova SSR service running). To use hypernova you need to do the following:
11 |
12 | 1. Install `django_react_templatetags` with the `hypernova` flag.
13 |
14 | ```
15 | pip install django_react_templatetags[hypernova]
16 | ```
17 |
18 | 2. Change SSR Service to hypernova (by adding this django setting)
19 |
20 | ```
21 | REACT_SSR_SERVICE="django_react_templatetags.ssr.hypernova.HypernovaService"
22 | ```
23 |
24 | 3. Make sure your `REACT_RENDER_HOST` points to the batch endpoint
25 |
26 | ```
27 | REACT_RENDER_HOST='http://react-service.test/batch
28 | ```
29 |
30 | ### Examples
31 |
32 | - [Django React Polls with Hypernova examples](https://github.com/marteinn/django-react-polls-with-hypernova-examples) covers two ways of implementing Hypernova in Django and DRTT.
33 |
34 | ## Hastur
35 |
36 | ### Installing
37 |
38 | To use django-react-templatetags with [Hastur](https://github.com/Frojd/Hastur) you need to do the following:
39 |
40 | 1. Install `django_react_templatetags` with the `ssr` flag.
41 |
42 | ```
43 | pip install django_react_templatetags[ssr]
44 | ```
45 |
46 | 2. Point the right endpoint:
47 |
48 | ```
49 | REACT_RENDER_HOST='http://hastur-service.test/
50 | ```
51 |
52 | ### How it works
53 | It works by posting component name and props to endpoint, that returns the html rendition. Payload example:
54 |
55 | ```json
56 | {
57 | "componentName": "MyComponent",
58 | "props": {
59 | "title": "my props title",
60 | "anyProp": "another prop"
61 | },
62 | "context": {"location": "http://localhost"},
63 | "static": false
64 | }
65 | ```
66 |
67 | You can set the context-parameter by using the `ssr_context` property on the template tag:
68 | ```html
69 | {% react_render component="Component" ssr_context=ctx %}
70 | ```
71 |
72 |
73 |
--------------------------------------------------------------------------------
/docs/settings.md:
--------------------------------------------------------------------------------
1 | # Settings
2 |
3 | ### General
4 |
5 | - `REACT_COMPONENT_PREFIX`: Adds a prefix to your React.createElement include, if you want to retrive your components from somewhere else then the global scope. (Default is `""`).
6 | - Example using (`REACT_COMPONENT_PREFIX="Cookie."`) will look for components in a global scope object named `Cookie`.
7 | - ...Becomes: `React.createElement(Cookie.MenuComponent, {})`
8 | - `REACT_RENDER_TAG_MANAGER`: This is a advanced setting that lets you replace our tag parsing rules (ReactTagManager) with your own. (Default is `""`)
9 | - Example: `"myapp.manager.MyReactTagManager"`
10 |
11 | ### SSR (Server Side Rendering)
12 |
13 | - `REACT_RENDER_HOST`: Which endpoint SSR requests should be posted at. (Default is `""`)
14 | - Example: `http://localhost:7000/render-component/`
15 | - The render host is a web service that accepts a post request and and renders the component to HTML. (This is what our [Hastur](https://github.com/Frojd/hastur) service does)
16 | - `REACT_RENDER_TIMEOUT`: Timeout for SSR requests, in seconds. (Default is `20`)
17 | - `REACT_RENDER_HEADERS`: Override the default request headers sent to the SSR service. Default: `{'Content-type': 'application/json', 'Accept': 'text/plain'}`.
18 | - Example: `REACT_RENDER_HEADERS = {'Authorization': 'Basic 123'}`
19 | - `REACT_SSR_SERVICE`: Replace the SSR Service with your own, can be useful if you have custom needs or our structure does not fit your use case. (Default is `django_react_templatetags.ssr.default.SSRService`).
20 |
--------------------------------------------------------------------------------
/docs/templatetags-params.md:
--------------------------------------------------------------------------------
1 | # How to use the templatetags included in this library
2 |
3 | ### react_render
4 |
5 | This templatetag are used when you want to initialize a component
6 |
7 | Accepts the following params:
8 | - `component`: The name of the component you want to include
9 | - `identifier`: Lets you override the autogenerated id with your own (Optional)
10 | - `class`: Allows you to append classes to the placeholder div (Optional)
11 | - `props`: A dict with props you want to send to your react component (Optional)
12 | - `prop_*`: Allows you to pass individual props to a component (Optional)
13 | - `ssr_context`: A dictionary with values you want to send to the SSR (Optional)
14 | - `no_placeholder`: Does not print the autogenerated placeholder div, ssr content are still printed, for this reason it is a recommended param when you work with Hypernova. (Optional)
15 |
--------------------------------------------------------------------------------
/docs/working-with-models.md:
--------------------------------------------------------------------------------
1 | # Working with models
2 |
3 | In this example, by adding `RepresentationMixin` as a mixin to the model, the templatetag will know how to generate the component data. You only need to pass the model instance to the `react_render` templatetag.
4 |
5 | This model...
6 |
7 | ```python
8 | from django.db import models
9 | from django_react_templatetags.mixins import RepresentationMixin
10 |
11 | class Person(RepresentationMixin, models.Model):
12 | first_name = models.CharField(max_length=255)
13 | last_name = models.CharField(max_length=255)
14 |
15 | def to_react_representation(self, context={}):
16 | return {
17 | 'first_name': self.first_name,
18 | 'last_name': self.last_name,
19 | }
20 | ```
21 |
22 | ...and this view
23 |
24 | ```python
25 | import myapp.models import Person
26 |
27 | def person_view(request, pk):
28 | return render(request, 'myapp/index.html', {
29 | 'menu_data': {
30 | 'person': Person.objects.get(pk=pk),
31 | },
32 | })
33 | ```
34 |
35 | ...and this template:
36 |
37 | ```html
38 | {% load react %}
39 |
40 | ...
41 |
42 |
43 |
46 |
47 |
48 | {% react_print %}
49 |
50 | ```
51 |
52 | ...will transform into this:
53 |
54 | ```html
55 | ...
56 |
57 |
63 | ```
64 |
65 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM python:3.12-slim
2 | MAINTAINER Frojd
3 |
4 | ENV PYTHONUNBUFFERED=1 \
5 | REQUIREMENTS=requirements.txt
6 |
7 | RUN apt-get update \
8 | && apt-get install -y netcat-traditional gcc libpq-dev \
9 | && apt-get install -y binutils libproj-dev \
10 | && apt-get install -y gettext \
11 | && rm -rf /var/lib/apt/lists/*
12 |
13 | WORKDIR /app
14 | ADD . /app/
15 |
16 | RUN pip install --upgrade pip \
17 | && pip install -r $REQUIREMENTS --no-cache-dir
18 |
19 | EXPOSE 8080
20 |
21 | ENTRYPOINT ["./docker-entrypoint.sh"]
22 | CMD ["runserver"]
23 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3'
2 | services:
3 | web:
4 | image: frojd/django-react-templatetags-web
5 | build: .
6 | volumes:
7 | - ./:/app
8 | ports:
9 | - "8086:8000"
10 | environment:
11 | - DJANGO_SETTINGS_MODULE=examplesite.settings
12 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/docker-entrypoint.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | # $0 is a script name, $1, $2, $3 etc are passed arguments
3 | # $1 is our command
4 | # Credits: https://rock-it.pl/how-to-write-excellent-dockerfiles/
5 | CMD=$1
6 |
7 | setup_django () {
8 | echo Running migrations
9 | python manage.py migrate --noinput
10 |
11 | echo Collecting static-files
12 | python manage.py collectstatic --noinput
13 |
14 | }
15 |
16 | case "$CMD" in
17 | "runserver" )
18 | setup_django
19 |
20 | echo Starting using manage.py runserver
21 | exec python manage.py runserver 0.0.0.0:8000
22 | ;;
23 | * )
24 | # Run custom command. Thanks to this line we can still use
25 | # "docker run our_container /bin/bash" and it will work
26 | exec $CMD ${@:2}
27 | ;;
28 | esac
29 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frojd/django-react-templatetags/60cd4efa6b45d9b40adef2f1833a1ff01f6da859/example_django_react_templatetags/examplesite/__init__.py
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/settings.py:
--------------------------------------------------------------------------------
1 | """
2 | Django settings for examplesite project.
3 |
4 | Generated by 'django-admin startproject' using Django 2.2.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/2.2/topics/settings/
8 |
9 | For the full list of settings and their values, see
10 | https://docs.djangoproject.com/en/2.2/ref/settings/
11 | """
12 |
13 | import os
14 |
15 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
16 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
17 |
18 |
19 | # Quick-start development settings - unsuitable for production
20 | # See https://docs.djangoproject.com/en/2.2/howto/deployment/checklist/
21 |
22 | # SECURITY WARNING: keep the secret key used in production secret!
23 | SECRET_KEY = "EXAMPLE_SECRET_KEY"
24 |
25 | # SECURITY WARNING: don't run with debug turned on in production!
26 | DEBUG = True
27 |
28 | ALLOWED_HOSTS = []
29 |
30 |
31 | # Application definition
32 |
33 | INSTALLED_APPS = [
34 | "django.contrib.admin",
35 | "django.contrib.auth",
36 | "django.contrib.contenttypes",
37 | "django.contrib.sessions",
38 | "django.contrib.messages",
39 | "django.contrib.staticfiles",
40 | "django_react_templatetags",
41 | "examplesite",
42 | ]
43 |
44 | MIDDLEWARE = [
45 | "django.middleware.security.SecurityMiddleware",
46 | "django.contrib.sessions.middleware.SessionMiddleware",
47 | "django.middleware.common.CommonMiddleware",
48 | "django.middleware.csrf.CsrfViewMiddleware",
49 | "django.contrib.auth.middleware.AuthenticationMiddleware",
50 | "django.contrib.messages.middleware.MessageMiddleware",
51 | "django.middleware.clickjacking.XFrameOptionsMiddleware",
52 | ]
53 |
54 | ROOT_URLCONF = "examplesite.urls"
55 |
56 | TEMPLATES = [
57 | {
58 | "BACKEND": "django.template.backends.django.DjangoTemplates",
59 | "DIRS": [],
60 | "APP_DIRS": True,
61 | "OPTIONS": {
62 | "context_processors": [
63 | "django.template.context_processors.debug",
64 | "django.template.context_processors.request",
65 | "django.contrib.auth.context_processors.auth",
66 | "django.contrib.messages.context_processors.messages",
67 | "django_react_templatetags.context_processors.react_context_processor",
68 | ],
69 | },
70 | },
71 | ]
72 |
73 | WSGI_APPLICATION = "examplesite.wsgi.application"
74 |
75 |
76 | # Database
77 | # https://docs.djangoproject.com/en/2.2/ref/settings/#databases
78 |
79 | DATABASES = {
80 | "default": {
81 | "ENGINE": "django.db.backends.sqlite3",
82 | "NAME": os.path.join(BASE_DIR, "db.sqlite3"),
83 | }
84 | }
85 |
86 |
87 | # Password validation
88 | # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators
89 |
90 | AUTH_PASSWORD_VALIDATORS = [
91 | {
92 | "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
93 | },
94 | {
95 | "NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",
96 | },
97 | {
98 | "NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",
99 | },
100 | {
101 | "NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",
102 | },
103 | ]
104 |
105 |
106 | # Internationalization
107 | # https://docs.djangoproject.com/en/2.2/topics/i18n/
108 |
109 | LANGUAGE_CODE = "en-us"
110 |
111 | TIME_ZONE = "UTC"
112 |
113 | USE_I18N = True
114 |
115 | USE_L10N = True
116 |
117 | USE_TZ = True
118 |
119 |
120 | # Static files (CSS, JavaScript, Images)
121 | # https://docs.djangoproject.com/en/2.2/howto/static-files/
122 |
123 | STATIC_ROOT = os.path.join(BASE_DIR, "static")
124 | STATIC_URL = "/static/"
125 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/templates/examplesite/index.html:
--------------------------------------------------------------------------------
1 | {% load react %}
2 |
3 |
4 |
7 |
8 | {% react_print %}
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/urls.py:
--------------------------------------------------------------------------------
1 | """examplesite URL Configuration
2 |
3 | The `urlpatterns` list routes URLs to views. For more information please see:
4 | https://docs.djangoproject.com/en/2.2/topics/http/urls/
5 | Examples:
6 | Function views
7 | 1. Add an import: from my_app import views
8 | 2. Add a URL to urlpatterns: path('', views.home, name='home')
9 | Class-based views
10 | 1. Add an import: from other_app.views import Home
11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
12 | Including another URLconf
13 | 1. Import the include() function: from django.urls import include, path
14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path
18 |
19 | from .views import menu_view
20 |
21 | urlpatterns = [
22 | path("admin/", admin.site.urls),
23 | path("menu_view", menu_view),
24 | ]
25 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/views.py:
--------------------------------------------------------------------------------
1 | from django.shortcuts import render
2 |
3 |
4 | def menu_view(request):
5 | return render(
6 | request,
7 | "examplesite/index.html",
8 | {
9 | "menu_data": {
10 | "example": 1,
11 | },
12 | },
13 | )
14 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/examplesite/wsgi.py:
--------------------------------------------------------------------------------
1 | """
2 | WSGI config for examplesite project.
3 |
4 | It exposes the WSGI callable as a module-level variable named ``application``.
5 |
6 | For more information on this file, see
7 | https://docs.djangoproject.com/en/2.2/howto/deployment/wsgi/
8 | """
9 |
10 | import os
11 |
12 | from django.core.wsgi import get_wsgi_application
13 |
14 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "examplesite.settings")
15 |
16 | application = get_wsgi_application()
17 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/manage.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 | """Django's command-line utility for administrative tasks."""
3 | import os
4 | import sys
5 |
6 |
7 | def main():
8 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "examplesite.settings")
9 | try:
10 | from django.core.management import execute_from_command_line
11 | except ImportError as exc:
12 | raise ImportError(
13 | "Couldn't import Django. Are you sure it's installed and "
14 | "available on your PYTHONPATH environment variable? Did you "
15 | "forget to activate a virtual environment?"
16 | ) from exc
17 | execute_from_command_line(sys.argv)
18 |
19 |
20 | if __name__ == "__main__":
21 | main()
22 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/requirements.txt:
--------------------------------------------------------------------------------
1 | Django>=4.0
2 | requests
3 |
--------------------------------------------------------------------------------
/example_django_react_templatetags/runtests.py:
--------------------------------------------------------------------------------
1 | import argparse
2 | import os
3 | import sys
4 |
5 | from django.core.management import execute_from_command_line
6 |
7 | os.environ[
8 | "DJANGO_SETTINGS_MODULE"
9 | ] = "django_react_templatetags.tests.demosite.settings"
10 |
11 |
12 | def runtests():
13 | args, rest = argparse.ArgumentParser().parse_known_args()
14 |
15 | argv = [sys.argv[0], "test"] + rest
16 | execute_from_command_line(argv)
17 |
18 |
19 | if __name__ == "__main__":
20 | runtests()
21 |
--------------------------------------------------------------------------------
/img/django-react-templatetags-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Frojd/django-react-templatetags/60cd4efa6b45d9b40adef2f1833a1ff01f6da859/img/django-react-templatetags-logo.png
--------------------------------------------------------------------------------
/pyproject.toml:
--------------------------------------------------------------------------------
1 | [tool.ruff]
2 | line-length = 88
3 |
4 | # Never enforce `E501` (line length violations).
5 | ignore = ["E501"]
6 |
7 | exclude = [
8 | "venv",
9 | "*/migrations/*",
10 | ]
11 |
12 | [tool.black]
13 | exclude = '''
14 | /(
15 | \.git
16 | | \.hg
17 | | \.mypy_cache
18 | | \.tox
19 | | \.venv
20 | | _build
21 | | buck-out
22 | | build
23 | | dist
24 | | migrations
25 | )/
26 | '''
27 |
--------------------------------------------------------------------------------
/requirements/dev.txt:
--------------------------------------------------------------------------------
1 | -r tests.txt
2 | pypandoc
3 |
--------------------------------------------------------------------------------
/requirements/tests.txt:
--------------------------------------------------------------------------------
1 | Django>=3.2
2 | requests # For Default SSR
3 | hypernova # For Hypernova SSR
4 |
--------------------------------------------------------------------------------
/runtests.py:
--------------------------------------------------------------------------------
1 | import argparse
2 | import os
3 | import sys
4 |
5 | from django.core.management import execute_from_command_line
6 |
7 | os.environ[
8 | "DJANGO_SETTINGS_MODULE"
9 | ] = "django_react_templatetags.tests.demosite.settings"
10 |
11 |
12 | def runtests():
13 | args, rest = argparse.ArgumentParser().parse_known_args()
14 |
15 | argv = [sys.argv[0], "test"] + rest
16 | execute_from_command_line(argv)
17 |
18 |
19 | if __name__ == "__main__":
20 | runtests()
21 |
--------------------------------------------------------------------------------
/setup.py:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env python
2 |
3 | import io
4 | import re
5 | from pathlib import Path
6 |
7 | from setuptools import find_packages, setup
8 |
9 | this_directory = Path(__file__).parent
10 | long_description = (this_directory / "README.md").read_text()
11 |
12 | version = ""
13 | with io.open("django_react_templatetags/__init__.py", "r", encoding="utf8") as fd:
14 | version = re.search(
15 | r'^__version__\s*=\s*[\'"]([^\'"]*)[\'"]', fd.read(), re.MULTILINE
16 | ).group(1)
17 |
18 | setup(
19 | name="django_react_templatetags",
20 | version=version,
21 | description=(
22 | "This django library allows you to add React components into your django templates."
23 | ), # NOQA
24 | long_description=long_description,
25 | long_description_content_type="text/markdown",
26 | author="Fröjd",
27 | author_email="martin@marteinn.se",
28 | url="https://github.com/frojd/django-react-templatetags",
29 | packages=find_packages(exclude=("tests*", "example_django_react_templatetags")),
30 | include_package_data=True,
31 | install_requires=[
32 | "Django>=3.2",
33 | ],
34 | extras_require={
35 | "ssr": ["requests"],
36 | "hypernova": ["hypernova"],
37 | },
38 | tests_require=[
39 | "Django>=3.2",
40 | "requests",
41 | ],
42 | license="MIT",
43 | zip_safe=False,
44 | classifiers=[
45 | "Development Status :: 5 - Production/Stable",
46 | "Environment :: Web Environment",
47 | "Intended Audience :: Developers",
48 | "Natural Language :: English",
49 | "Intended Audience :: Developers",
50 | "License :: OSI Approved :: MIT License",
51 | "Programming Language :: Python",
52 | "Programming Language :: Python :: 3",
53 | "Programming Language :: Python :: 3.8",
54 | "Programming Language :: Python :: 3.9",
55 | "Programming Language :: Python :: 3.10",
56 | "Programming Language :: Python :: 3.11",
57 | "Programming Language :: Python :: 3.12",
58 | "Framework :: Django",
59 | "Framework :: Django :: 3.2",
60 | "Framework :: Django :: 4.2",
61 | "Framework :: Django :: 5.0",
62 | "Topic :: Utilities",
63 | "Programming Language :: JavaScript",
64 | ],
65 | )
66 |
--------------------------------------------------------------------------------