graphiti 2.0.0.beta.2 → 2.0.0.beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (269) hide show
  1. checksums.yaml +4 -4
  2. data/.github/workflows/ci.yml +30 -86
  3. data/.github/workflows/docs.yml +60 -0
  4. data/.github/workflows/release.yml +8 -8
  5. data/.gitignore +7 -0
  6. data/.npmrc +9 -0
  7. data/.standard.yml +4 -1
  8. data/Appraisals +33 -32
  9. data/CHANGELOG.md +41 -0
  10. data/README.md +13 -2
  11. data/UPGRADING.md +2 -68
  12. data/docs/concepts/backends-and-models.md +122 -0
  13. data/docs/concepts/endpoints.md +183 -0
  14. data/docs/concepts/links.md +212 -0
  15. data/docs/concepts/overview.md +80 -0
  16. data/docs/concepts/persisting.md +376 -0
  17. data/docs/concepts/relationships.md +527 -0
  18. data/docs/concepts/resources.md +677 -0
  19. data/docs/getting-started/first-api.md +289 -0
  20. data/docs/getting-started/installation.md +185 -0
  21. data/docs/intro.md +307 -0
  22. data/docs/js/authentication.md +63 -0
  23. data/docs/js/ddau.md +20 -0
  24. data/docs/js/extra-params.md +41 -0
  25. data/docs/js/index.md +112 -0
  26. data/docs/js/installation.md +120 -0
  27. data/docs/js/middleware.md +72 -0
  28. data/docs/js/models.md +202 -0
  29. data/docs/js/reads.md +494 -0
  30. data/docs/js/state-syncing.md +100 -0
  31. data/docs/js/writes.md +373 -0
  32. data/docs/reference/vandal.md +63 -0
  33. data/docs/reference/why.md +13 -0
  34. data/docs/topics/authorization.md +155 -0
  35. data/docs/topics/caching.md +55 -0
  36. data/docs/topics/customizing-sideloads.md +156 -0
  37. data/docs/topics/debugging.md +216 -0
  38. data/docs/topics/error-handling.md +210 -0
  39. data/docs/topics/etags.md +46 -0
  40. data/docs/topics/hopping-relationships.md +149 -0
  41. data/docs/topics/json-attributes.md +77 -0
  42. data/docs/topics/openstruct-models.md +50 -0
  43. data/docs/topics/remote-resources.md +291 -0
  44. data/docs/topics/testing.md +894 -0
  45. data/docs/topics/without-activerecord.md +324 -0
  46. data/docs/tutorial/index.md +58 -0
  47. data/docs/tutorial/step_0.md +107 -0
  48. data/docs/tutorial/step_1.md +199 -0
  49. data/docs/tutorial/step_2.md +312 -0
  50. data/docs/tutorial/step_3.md +142 -0
  51. data/docs/tutorial/step_4.md +135 -0
  52. data/docs/tutorial/step_5.md +69 -0
  53. data/docs/tutorial/step_6.md +82 -0
  54. data/docs/tutorial/step_7.md +205 -0
  55. data/docs/tutorial/step_8.md +128 -0
  56. data/docs/tutorial/step_9.md +171 -0
  57. data/docs/upgrading.md +265 -0
  58. data/gemfiles/rails_7_1.gemfile +4 -3
  59. data/gemfiles/{rails_7_2_graphiti_rails.gemfile → rails_7_2.gemfile} +3 -3
  60. data/gemfiles/{rails_8_1_graphiti_rails.gemfile → rails_8_0.gemfile} +3 -3
  61. data/gemfiles/{rails_8_0_graphiti_rails.gemfile → rails_8_1.gemfile} +3 -3
  62. data/graphiti.gemspec +7 -5
  63. data/{deprecated_generators → lib/generators}/graphiti/api_test_generator.rb +7 -1
  64. data/{deprecated_generators → lib/generators}/graphiti/generator_mixin.rb +14 -1
  65. data/{deprecated_generators → lib/generators}/graphiti/install_generator.rb +19 -13
  66. data/{deprecated_generators → lib/generators}/graphiti/resource_generator.rb +43 -6
  67. data/{deprecated_generators → lib/generators}/graphiti/templates/index_request_spec.rb.erb +1 -1
  68. data/{deprecated_generators → lib/generators}/graphiti/templates/resource_reads_spec.rb.erb +6 -6
  69. data/{deprecated_generators → lib/generators}/graphiti/templates/show_request_spec.rb.erb +1 -1
  70. data/lib/graphiti/configuration.rb +2 -2
  71. data/lib/graphiti/error_serializers/conflict_request.rb +19 -0
  72. data/lib/graphiti/error_serializers/deprecated_constants.rb +48 -0
  73. data/lib/graphiti/error_serializers/invalid_request.rb +56 -0
  74. data/lib/graphiti/error_serializers/validation.rb +143 -0
  75. data/lib/graphiti/errors.rb +4 -23
  76. data/lib/graphiti/query.rb +1 -1
  77. data/lib/graphiti/rails/context.rb +33 -0
  78. data/lib/graphiti/rails/controller.rb +41 -0
  79. data/lib/graphiti/rails/debugging.rb +18 -0
  80. data/lib/graphiti/rails/exception_handlers.rb +77 -0
  81. data/lib/graphiti/rails/railtie.rb +139 -0
  82. data/lib/graphiti/rails/responders.rb +21 -0
  83. data/lib/graphiti/rails/test_helpers.rb +22 -0
  84. data/lib/graphiti/rails.rb +47 -29
  85. data/lib/graphiti/resource/configuration.rb +1 -0
  86. data/lib/graphiti/resource/interface.rb +2 -2
  87. data/lib/graphiti/resource/persistence.rb +14 -2
  88. data/lib/graphiti/resource/remote.rb +2 -2
  89. data/lib/graphiti/resource/sideloading.rb +1 -1
  90. data/lib/graphiti/resource.rb +13 -1
  91. data/lib/graphiti/responders.rb +7 -20
  92. data/lib/graphiti/schema.rb +5 -1
  93. data/lib/graphiti/schema_diff.rb +4 -0
  94. data/lib/graphiti/scope.rb +45 -37
  95. data/lib/graphiti/serializer.rb +6 -0
  96. data/lib/graphiti/sideload/belongs_to.rb +38 -5
  97. data/lib/graphiti/sideload/polymorphic_belongs_to.rb +27 -23
  98. data/lib/graphiti/sideload.rb +54 -35
  99. data/lib/graphiti/spec_helpers/errors.rb +73 -0
  100. data/lib/graphiti/spec_helpers/errors_proxy.rb +75 -0
  101. data/lib/graphiti/spec_helpers/helpers.rb +107 -0
  102. data/lib/graphiti/spec_helpers/node.rb +88 -0
  103. data/lib/graphiti/spec_helpers/rspec.rb +147 -0
  104. data/lib/graphiti/spec_helpers.rb +53 -0
  105. data/lib/graphiti/util/include_params.rb +2 -2
  106. data/lib/graphiti/util/persistence.rb +10 -11
  107. data/lib/graphiti/util/serializer_relationships.rb +41 -5
  108. data/lib/graphiti/version.rb +1 -1
  109. data/lib/graphiti-rails.rb +11 -0
  110. data/lib/graphiti.rb +34 -10
  111. data/lib/graphiti_errors.rb +11 -0
  112. data/lib/graphiti_spec_helpers/rspec.rb +3 -0
  113. data/lib/graphiti_spec_helpers.rb +11 -0
  114. data/lib/{graphiti/deprecated_tasks.rb → tasks/graphiti.rake} +6 -1
  115. data/package-lock.json +6199 -0
  116. data/package.json +5 -4
  117. data/website/.gitignore +20 -0
  118. data/website/README.md +43 -0
  119. data/website/docusaurus.config.js +141 -0
  120. data/website/package-lock.json +19474 -0
  121. data/website/package.json +46 -0
  122. data/website/sidebars.js +82 -0
  123. data/website/src/css/custom.css +58 -0
  124. data/website/src/pages/markdown-page.mdx +7 -0
  125. data/website/static/.nojekyll +0 -0
  126. data/website/static/1.13/2019/03/31/graphiti-1-0.html +205 -0
  127. data/website/static/1.13/2019/05/08/graphiti-1-1.html +212 -0
  128. data/website/static/1.13/2019/05/20/graphiti-1-2.html +214 -0
  129. data/website/static/1.13/2019/10/14/tutorial.html +198 -0
  130. data/website/static/1.13/CNAME +1 -0
  131. data/website/static/1.13/README.md +16 -0
  132. data/website/static/1.13/assets/css/syntax.css +60 -0
  133. data/website/static/1.13/assets/favicons/android-chrome-192x192.png +0 -0
  134. data/website/static/1.13/assets/favicons/android-chrome-256x256.png +0 -0
  135. data/website/static/1.13/assets/favicons/apple-touch-icon.png +0 -0
  136. data/website/static/1.13/assets/favicons/browserconfig.xml +9 -0
  137. data/website/static/1.13/assets/favicons/favicon-16x16.png +0 -0
  138. data/website/static/1.13/assets/favicons/favicon-32x32.png +0 -0
  139. data/website/static/1.13/assets/favicons/favicon.ico +0 -0
  140. data/website/static/1.13/assets/favicons/mstile-150x150.png +0 -0
  141. data/website/static/1.13/assets/favicons/safari-pinned-tab.svg +1 -0
  142. data/website/static/1.13/assets/favicons/site.webmanifest +19 -0
  143. data/website/static/1.13/assets/img/backend.gif +0 -0
  144. data/website/static/1.13/assets/img/conformity.png +0 -0
  145. data/website/static/1.13/assets/img/error_payload.png +0 -0
  146. data/website/static/1.13/assets/img/gh.png +0 -0
  147. data/website/static/1.13/assets/img/lifecycle.gif +0 -0
  148. data/website/static/1.13/assets/img/logo-500.png +0 -0
  149. data/website/static/1.13/assets/img/logo.png +0 -0
  150. data/website/static/1.13/assets/img/love-graffiti.jpg +0 -0
  151. data/website/static/1.13/assets/img/meta_total_count.png +0 -0
  152. data/website/static/1.13/assets/img/persist.jpg +0 -0
  153. data/website/static/1.13/assets/img/resource.gif +0 -0
  154. data/website/static/1.13/assets/img/rest-graffiti.jpg +0 -0
  155. data/website/static/1.13/assets/img/rest1.gif +0 -0
  156. data/website/static/1.13/assets/img/rest2.gif +0 -0
  157. data/website/static/1.13/assets/img/rest3.gif +0 -0
  158. data/website/static/1.13/assets/img/rethink-rest-graffiti.jpg +0 -0
  159. data/website/static/1.13/assets/img/why.png +0 -0
  160. data/website/static/1.13/assets/js/highlight.pack.js +2 -0
  161. data/website/static/1.13/assets/main.css +15518 -0
  162. data/website/static/1.13/assets/main.css.map +1 -0
  163. data/website/static/1.13/bin/bundle +109 -0
  164. data/website/static/1.13/bin/jekyll +27 -0
  165. data/website/static/1.13/bin/kramdown +27 -0
  166. data/website/static/1.13/bin/listen +27 -0
  167. data/website/static/1.13/bin/rake +27 -0
  168. data/website/static/1.13/bin/rougify +27 -0
  169. data/website/static/1.13/bin/safe_yaml +27 -0
  170. data/website/static/1.13/bin/sass +27 -0
  171. data/website/static/1.13/bin/sass-convert +27 -0
  172. data/website/static/1.13/bin/scss +27 -0
  173. data/website/static/1.13/blog.html +259 -0
  174. data/website/static/1.13/cheatsheet.html +316 -0
  175. data/website/static/1.13/cookbooks/authorization.md +0 -0
  176. data/website/static/1.13/cookbooks/caching.md +0 -0
  177. data/website/static/1.13/cookbooks/customizing-sideloads.html +325 -0
  178. data/website/static/1.13/cookbooks/etags.md +0 -0
  179. data/website/static/1.13/cookbooks/hopping-relationships.html +324 -0
  180. data/website/static/1.13/cookbooks/json_attributes.md +0 -0
  181. data/website/static/1.13/cookbooks/openstruct-models.md +0 -0
  182. data/website/static/1.13/cookbooks/remote-resources.md +0 -0
  183. data/website/static/1.13/cookbooks/without-activerecord.html +510 -0
  184. data/website/static/1.13/features.html +249 -0
  185. data/website/static/1.13/feed.xml +106 -0
  186. data/website/static/1.13/guides/concepts/backends-and-models.html +467 -0
  187. data/website/static/1.13/guides/concepts/debugging.html +440 -0
  188. data/website/static/1.13/guides/concepts/endpoints.html +432 -0
  189. data/website/static/1.13/guides/concepts/error-handling.html +396 -0
  190. data/website/static/1.13/guides/concepts/links.html +501 -0
  191. data/website/static/1.13/guides/concepts/remote-resources.html +536 -0
  192. data/website/static/1.13/guides/concepts/resources.html +2176 -0
  193. data/website/static/1.13/guides/concepts/testing.html +1469 -0
  194. data/website/static/1.13/guides/getting-started/installation.html +420 -0
  195. data/website/static/1.13/guides/graphiti-rails-migration.html +242 -0
  196. data/website/static/1.13/guides/index.html +269 -0
  197. data/website/static/1.13/guides/overview.html +325 -0
  198. data/website/static/1.13/guides/upgrading-2-0.html +193 -0
  199. data/website/static/1.13/guides/upgrading.html +314 -0
  200. data/website/static/1.13/guides/vandal.html +282 -0
  201. data/website/static/1.13/guides/why.html +1121 -0
  202. data/website/static/1.13/index.html +72 -0
  203. data/website/static/1.13/js/authentication.html +295 -0
  204. data/website/static/1.13/js/ddau.html +238 -0
  205. data/website/static/1.13/js/extra-params.html +270 -0
  206. data/website/static/1.13/js/index.html +321 -0
  207. data/website/static/1.13/js/installation.html +637 -0
  208. data/website/static/1.13/js/introduction.html +257 -0
  209. data/website/static/1.13/js/middleware.html +318 -0
  210. data/website/static/1.13/js/reads/fieldsets.html +271 -0
  211. data/website/static/1.13/js/reads/filtering.html +289 -0
  212. data/website/static/1.13/js/reads/includes.html +260 -0
  213. data/website/static/1.13/js/reads/index.html +497 -0
  214. data/website/static/1.13/js/reads/nested-queries.html +353 -0
  215. data/website/static/1.13/js/reads/pagination.html +260 -0
  216. data/website/static/1.13/js/reads/sorting.html +265 -0
  217. data/website/static/1.13/js/reads/statistics.html +289 -0
  218. data/website/static/1.13/js/state-syncing.html +340 -0
  219. data/website/static/1.13/js/writes/deferred.html +296 -0
  220. data/website/static/1.13/js/writes/dirty-tracking.html +399 -0
  221. data/website/static/1.13/js/writes/index.html +391 -0
  222. data/website/static/1.13/js/writes/nested.html +330 -0
  223. data/website/static/1.13/js/writes/validations.html +272 -0
  224. data/website/static/1.13/quickstart.html +660 -0
  225. data/website/static/1.13/template +161 -0
  226. data/website/static/1.13/tutorial/index.html +250 -0
  227. data/website/static/1.13/tutorial/step_0.html +292 -0
  228. data/website/static/1.13/tutorial/step_1.html +517 -0
  229. data/website/static/1.13/tutorial/step_2.html +481 -0
  230. data/website/static/1.13/tutorial/step_3.html +323 -0
  231. data/website/static/1.13/tutorial/step_4.html +318 -0
  232. data/website/static/1.13/tutorial/step_5.html +265 -0
  233. data/website/static/1.13/tutorial/step_6.html +276 -0
  234. data/website/static/1.13/tutorial/step_7.html +390 -0
  235. data/website/static/1.13/tutorial/step_8.html +316 -0
  236. data/website/static/1.13/tutorial/step_9.html +365 -0
  237. data/website/static/assets/img/error_payload.png +0 -0
  238. data/website/static/assets/img/legacy/legacy-0378a3bb39.png +0 -0
  239. data/website/static/assets/img/legacy/legacy-05bbd3e5fd.png +0 -0
  240. data/website/static/assets/img/legacy/legacy-07aa104495.png +0 -0
  241. data/website/static/assets/img/legacy/legacy-0c75a16b3a.gif +0 -0
  242. data/website/static/assets/img/legacy/legacy-3076df6209.png +0 -0
  243. data/website/static/assets/img/legacy/legacy-7f6889bc89.png +0 -0
  244. data/website/static/assets/img/legacy/legacy-a2cc4363c3.png +0 -0
  245. data/website/static/assets/img/legacy/legacy-f67cfa89ab.png +0 -0
  246. data/website/static/assets/img/meta_total_count.png +0 -0
  247. data/website/static/img/docusaurus-social-card.jpg +0 -0
  248. data/website/static/img/docusaurus.png +0 -0
  249. data/website/static/img/favicon.ico +0 -0
  250. data/website/static/img/logo.png +0 -0
  251. data/website/static/img/logo.svg +1 -0
  252. data/website/static/img/undraw_docusaurus_mountain.svg +171 -0
  253. data/website/static/img/undraw_docusaurus_react.svg +170 -0
  254. data/website/static/img/undraw_docusaurus_tree.svg +40 -0
  255. metadata +245 -46
  256. data/gemfiles/rails_6.gemfile +0 -18
  257. data/gemfiles/rails_6_graphiti_rails.gemfile +0 -19
  258. data/gemfiles/rails_7.gemfile +0 -18
  259. data/gemfiles/rails_7_1_graphiti_rails.gemfile +0 -19
  260. data/gemfiles/rails_7_graphiti_rails.gemfile +0 -19
  261. data/lib/graphiti/railtie.rb +0 -121
  262. /data/{deprecated_generators → lib/generators}/graphiti/resource_test_generator.rb +0 -0
  263. /data/{deprecated_generators → lib/generators}/graphiti/templates/application_resource.rb.erb +0 -0
  264. /data/{deprecated_generators → lib/generators}/graphiti/templates/controller.rb.erb +0 -0
  265. /data/{deprecated_generators → lib/generators}/graphiti/templates/create_request_spec.rb.erb +0 -0
  266. /data/{deprecated_generators → lib/generators}/graphiti/templates/destroy_request_spec.rb.erb +0 -0
  267. /data/{deprecated_generators → lib/generators}/graphiti/templates/resource.rb.erb +0 -0
  268. /data/{deprecated_generators → lib/generators}/graphiti/templates/resource_writes_spec.rb.erb +0 -0
  269. /data/{deprecated_generators → lib/generators}/graphiti/templates/update_request_spec.rb.erb +0 -0
@@ -0,0 +1,330 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
10
+
11
+ <link rel="apple-touch-icon" sizes="180x180" href="/1.13/assets/favicons/apple-touch-icon.png">
12
+ <link rel="icon" type="image/png" sizes="32x32" href="/1.13/assets/favicons/favicon-32x32.png">
13
+ <link rel="icon" type="image/png" sizes="16x16" href="/1.13/assets/favicons/favicon-16x16.png">
14
+ <link rel="manifest" href="/1.13/assets/favicons/site.webmanifest">
15
+ <link rel="mask-icon" href="/1.13/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
16
+ <link rel="shortcut icon" href="/1.13/assets/favicons/favicon.ico">
17
+ <meta name="msapplication-TileColor" content="#F86DA7">
18
+ <meta name="msapplication-config" content="/1.13/assets/favicons/browserconfig.xml">
19
+ <meta name="theme-color" content="#F86DA7">
20
+
21
+ <title>Graphiti</title>
22
+ <meta name="description" content="Stylish Graph APIs">
23
+
24
+ <link rel="stylesheet" href="/1.13/assets/main.css?ref=wh4t3v45">
25
+ <link rel="alternate" type="application/rss+xml" title="Graphiti" href="/1.13/feed.xml">
26
+
27
+ <!-- Global site tag (gtag.js) - Google Analytics -->
28
+ <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
29
+ <script>
30
+ window.dataLayer = window.dataLayer || [];
31
+ function gtag(){dataLayer.push(arguments);}
32
+ gtag('js', new Date());
33
+
34
+ gtag('config', 'UA-127904727-1');
35
+ </script>
36
+
37
+ <!-- javascript -->
38
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
39
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
40
+
41
+
42
+ </head>
43
+
44
+
45
+ <body>
46
+ <main class="page-content" aria-label="Content">
47
+ <div class="wrapper">
48
+ <header class="navbar navbar-inverse normal" role="banner">
49
+ <div class="container">
50
+ <div class="navbar-header">
51
+ <a href="/1.13/1.13" class="navbar-brand">
52
+ <img alt="logo" src="/1.13/assets/img/logo.png">
53
+ </a>
54
+ </div>
55
+ <nav class="" role="navigation">
56
+ <ul class="nav navbar-nav nav-links">
57
+ <li>
58
+ <a class="quickstart nav-link" href="/1.13/quickstart">Quickstart</a>
59
+ </li>
60
+ <li>
61
+ <a class="guides nav-link" href="/1.13/guides">Guides</a>
62
+ </li>
63
+ <li>
64
+ <a class="tutorial nav-link" href="/1.13/tutorial">Tutorial</a>
65
+ </li>
66
+ <li>
67
+ <a class="spraypaint nav-link" href="/1.13/js">Spraypaint</a>
68
+ </li>
69
+ </ul>
70
+ <ul class="nav gh navbar-nav navbar-right visible-lg visible-md">
71
+ <li>
72
+ <span class="star">⭐</span>
73
+ <a href="https://github.com/graphiti-api/graphiti">
74
+ <img alt="github-star" style="margin-right: 65px;margin-top: -20px" src="/1.13/assets/img/gh.png">
75
+ </a>
76
+ </li>
77
+ </ul>
78
+ </nav>
79
+ </div>
80
+ </header>
81
+
82
+ <div class="container">
83
+ <h1>
84
+ Spraypaint
85
+ <small>the isomorphic, framework-agnostic Graphiti ORM</small>
86
+ </h1>
87
+
88
+ <div class="js-toc col-md-3">
89
+ <ul>
90
+ <li><a href="/1.13/js/index">Home</a></li>
91
+ <li><a href="/1.13/js/introduction">Introduction</a></li>
92
+ <li><a href="/1.13/js/installation">Installation</a>
93
+ <ul>
94
+ <li><a href="/1.13/js/installation#typescript">Typescript</a></li>
95
+ <li><a href="/1.13/js/installation#defining-models">Defining Models</a></li>
96
+ <li><a href="/1.13/js/installation#connecting-to-the-api">Connecting to the API</a></li>
97
+ <li><a href="/1.13/js/installation#defining-attributes">Defining Attributes</a></li>
98
+ <li><a href="/1.13/js/installation#defining-relationships">Defining Relationships</a></li>
99
+ </ul>
100
+ </li>
101
+ <li><a href="/1.13/js/reads">Reads</a>
102
+ <ul>
103
+ <li><a href="/1.13/js/reads/sorting">Sorting</a></li>
104
+ <li><a href="/1.13/js/reads/pagination">Pagination</a></li>
105
+ <li><a href="/1.13/js/reads/filtering">Filtering</a></li>
106
+ <li><a href="/1.13/js/reads/fieldsets">Fieldsets</a></li>
107
+ <li><a href="/1.13/js/reads/statistics">Statistics</a></li>
108
+ <li><a href="/1.13/js/reads/includes">Includes</a></li>
109
+ <li><a href="/1.13/js/reads/nested-queries">Nested Queries</a></li>
110
+ </ul>
111
+ </li>
112
+ <li><a href="/1.13/js/writes">Writes</a>
113
+ <ul>
114
+ <li><a href="/1.13/js/writes/validations">Validations</a></li>
115
+ <li><a href="/1.13/js/writes/dirty-tracking">Dirty Tracking</a></li>
116
+ <li><a href="/1.13/js/writes/nested">Nested Writes</a></li>
117
+ <li><a href="/1.13/js/writes/deferred">Deferred Action</a></li>
118
+ </ul>
119
+ </li>
120
+ <li><a href="/1.13/js/middleware">Middleware</a></li>
121
+ <li><a href="/1.13/js/authentication">Authentication</a></li>
122
+ <li><a href="/1.13/js/state-syncing">State Syncing</a></li>
123
+ <li><a href="/1.13/js/ddau">Data Down, Actions Up</a></li>
124
+ <li><a href="/1.13/js/extra-params">Extra params</a></li>
125
+ </ul>
126
+ </div>
127
+
128
+ <div class="col-md-8 col-md-offset-1">
129
+ <h3 id="nested-writes">Nested Writes</h3>
130
+
131
+ <p>You can write a <code class="language-plaintext highlighter-rouge">Model</code> and all of its relationships in a single
132
+ request. Keep in mind normal dirty tracking rules still apply - nothing
133
+ is sent to the server unless it is dirty.</p>
134
+
135
+ <div class="tabs">
136
+ <div class="tab typescript active">
137
+ <span>Typescript</span>
138
+ </div>
139
+ <div class="tab javascript">
140
+ <span>Javascript</span>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="code-tabs">
145
+
146
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">let</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Author</span><span class="p">()</span>
147
+ <span class="kd">let</span> <span class="nx">comment</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Comment</span><span class="p">({</span> <span class="nx">author</span> <span class="p">})</span>
148
+ <span class="kd">let</span> <span class="nx">post</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Post</span><span class="p">({</span> <span class="na">comments</span><span class="p">:</span> <span class="p">[</span><span class="nx">comment</span><span class="p">]</span> <span class="p">})</span>
149
+
150
+ <span class="c1">// post.save({ with: "comments" })</span>
151
+ <span class="c1">// post.save({ with: ["comments", "blog"] })</span>
152
+ <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="p">{</span> <span class="na">comments</span><span class="p">:</span> <span class="dl">'</span><span class="s1">author</span><span class="dl">'</span> <span class="p">}})</span>
153
+ </code></pre></figure>
154
+
155
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="kd">var</span> <span class="nx">author</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Author</span><span class="p">();</span>
156
+ <span class="kd">var</span> <span class="nx">comment</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Comment</span><span class="p">({</span> <span class="na">author</span><span class="p">:</span> <span class="nx">author</span> <span class="p">});</span>
157
+ <span class="kd">var</span> <span class="nx">post</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Post</span><span class="p">({</span> <span class="na">comments</span><span class="p">:</span> <span class="p">[</span><span class="nx">comment</span><span class="p">]</span> <span class="p">});</span>
158
+
159
+ <span class="c1">// post.save({ with: "comments" })</span>
160
+ <span class="c1">// post.save({ with: ["comments", "blog"] })</span>
161
+ <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="p">{</span> <span class="na">comments</span><span class="p">:</span> <span class="dl">"</span><span class="s2">author</span><span class="dl">"</span> <span class="p">}});</span>
162
+ </code></pre></figure>
163
+
164
+ </div>
165
+
166
+ <p>Use <code class="language-plaintext highlighter-rouge">model.isMarkedForDestruction = true</code> to delete the associated
167
+ object. Use <code class="language-plaintext highlighter-rouge">model.isMarkedForDisassociation = true</code> to remove the association
168
+ without deleting the underlying object:</p>
169
+
170
+ <div class="tabs">
171
+ <div class="tab typescript active">
172
+ <span>Typescript</span>
173
+ </div>
174
+ <div class="tab javascript">
175
+ <span>Javascript</span>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="code-tabs">
180
+
181
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">let</span> <span class="nx">post</span> <span class="o">=</span> <span class="p">(</span><span class="k">await</span> <span class="nx">Post</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">comments</span><span class="dl">"</span><span class="p">).</span><span class="nf">first</span><span class="p">()).</span><span class="nx">data</span>
182
+ <span class="nx">post</span><span class="p">.</span><span class="nx">comments</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">isMarkedForDestruction</span> <span class="o">=</span> <span class="kc">true</span>
183
+ <span class="nx">post</span><span class="p">.</span><span class="nx">comments</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">isMarkedForDisassociation</span> <span class="o">=</span> <span class="kc">true</span>
184
+
185
+ <span class="c1">// destroys the first comment</span>
186
+ <span class="c1">// disassociates the second comment</span>
187
+ <span class="k">await</span> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="dl">"</span><span class="s2">comments</span><span class="dl">"</span> <span class="p">})</span>
188
+ </code></pre></figure>
189
+
190
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">Post</span><span class="p">.</span><span class="nf">includes</span><span class="p">(</span><span class="dl">"</span><span class="s2">comments</span><span class="dl">"</span><span class="p">).</span><span class="nf">first</span><span class="p">().</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
191
+ <span class="kd">var</span> <span class="nx">post</span> <span class="o">=</span> <span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
192
+ <span class="nx">post</span><span class="p">.</span><span class="nx">comments</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">isMarkedForDestruction</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
193
+ <span class="nx">post</span><span class="p">.</span><span class="nx">comments</span><span class="p">[</span><span class="mi">1</span><span class="p">].</span><span class="nx">isMarkedForDisassociation</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
194
+
195
+ <span class="c1">// destroys the first comment</span>
196
+ <span class="c1">// disassociates the second comment</span>
197
+ <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="dl">"</span><span class="s2">comments</span><span class="dl">"</span> <span class="p">})</span>
198
+ <span class="p">});</span>
199
+ </code></pre></figure>
200
+
201
+ </div>
202
+
203
+ <p>You may want to send <em>only</em> the <code class="language-plaintext highlighter-rouge">id</code> of the related object to the server - ensuring the models are associated without updating attributes by
204
+ accident. Just add <code class="language-plaintext highlighter-rouge">.id</code> to the relationship name:</p>
205
+
206
+ <div class="tabs">
207
+ <div class="tab typescript active">
208
+ <span>Typescript</span>
209
+ </div>
210
+ <div class="tab javascript">
211
+ <span>Javascript</span>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="code-tabs">
216
+
217
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="dl">"</span><span class="s2">comments.id</span><span class="dl">"</span> <span class="p">})</span>
218
+ </code></pre></figure>
219
+
220
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">({</span> <span class="na">with</span><span class="p">:</span> <span class="dl">"</span><span class="s2">comments.id</span><span class="dl">"</span> <span class="p">})</span>
221
+ </code></pre></figure>
222
+
223
+ </div>
224
+
225
+ <div class="clearfix">
226
+ <h2 id="next">
227
+ <a href="/1.13/js/writes/deferred">
228
+ NEXT:
229
+ <small>Deferred Action</small>
230
+ &raquo;
231
+ </a>
232
+ </h2>
233
+ </div>
234
+ </div>
235
+
236
+ </div>
237
+ </div>
238
+ </main>
239
+ <div class="main-footer main-footer--dark">
240
+ <div class="container">
241
+ <div class="row">
242
+ <div class="col-sm-4 menu">
243
+ <h3>Overview</h3>
244
+ <ul>
245
+ <li>
246
+ <a href="/1.13/quickstart">Quickstart</a>
247
+ </li>
248
+ <li>
249
+ <a href="/1.13/tutorial">Tutorial</a>
250
+ </li>
251
+ <li>
252
+ <a href="/1.13/guides">Guides</a>
253
+ </li>
254
+ </ul>
255
+ </div>
256
+ <div class="col-sm-4 menu">
257
+ <h3>Contact</h3>
258
+ <ul>
259
+ <li>
260
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
261
+ </li>
262
+ <li>
263
+ <a href="mailto:richmolj@gmail.com">Email</a>
264
+ </li>
265
+ </ul>
266
+ </div>
267
+ <div class="col-sm-4 menu">
268
+ <h3>Related</h3>
269
+ <ul>
270
+ <li>
271
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
272
+ </li>
273
+ <li>
274
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
275
+ </li>
276
+ <li>
277
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
278
+ </li>
279
+ </ul>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </div>
284
+
285
+ <script type="text/javascript">
286
+ $(function () {
287
+
288
+ var flipTabs = function() {
289
+ var isTS = true;
290
+ if (localStorage.getItem('js-lang') === 'javascript') {
291
+ isTS = false;
292
+ }
293
+
294
+ $('.code-tabs').each(function(index, el) {
295
+ if (isTS) {
296
+ console.log('hiding js');
297
+ $($(el).children()[1]).hide();
298
+ $($(el).children()[0]).show();
299
+ } else {
300
+ console.log('hiding ts');
301
+ $($(el).children()[0]).hide();
302
+ $($(el).children()[1]).show();
303
+ }
304
+ });
305
+
306
+ if (isTS) {
307
+ $('.tab.typescript').addClass('active');
308
+ $('.tab.javascript').removeClass('active');
309
+ } else {
310
+ $('.tab.typescript').removeClass('active');
311
+ $('.tab.javascript').addClass('active');
312
+ }
313
+ }
314
+
315
+ $('.tab').click(function() {
316
+ if ($(this).hasClass('typescript')) {
317
+ localStorage.setItem('js-lang', 'typescript');
318
+ } else {
319
+ localStorage.setItem('js-lang', 'javascript');
320
+ }
321
+
322
+ flipTabs();
323
+ });
324
+
325
+ flipTabs();
326
+ })
327
+ </script>
328
+
329
+ </body>
330
+ </html>
@@ -0,0 +1,272 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
9
+ <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
10
+
11
+ <link rel="apple-touch-icon" sizes="180x180" href="/1.13/assets/favicons/apple-touch-icon.png">
12
+ <link rel="icon" type="image/png" sizes="32x32" href="/1.13/assets/favicons/favicon-32x32.png">
13
+ <link rel="icon" type="image/png" sizes="16x16" href="/1.13/assets/favicons/favicon-16x16.png">
14
+ <link rel="manifest" href="/1.13/assets/favicons/site.webmanifest">
15
+ <link rel="mask-icon" href="/1.13/assets/favicons/safari-pinned-tab.svg" color="#F86DA7">
16
+ <link rel="shortcut icon" href="/1.13/assets/favicons/favicon.ico">
17
+ <meta name="msapplication-TileColor" content="#F86DA7">
18
+ <meta name="msapplication-config" content="/1.13/assets/favicons/browserconfig.xml">
19
+ <meta name="theme-color" content="#F86DA7">
20
+
21
+ <title>Graphiti</title>
22
+ <meta name="description" content="Stylish Graph APIs">
23
+
24
+ <link rel="stylesheet" href="/1.13/assets/main.css?ref=wh4t3v45">
25
+ <link rel="alternate" type="application/rss+xml" title="Graphiti" href="/1.13/feed.xml">
26
+
27
+ <!-- Global site tag (gtag.js) - Google Analytics -->
28
+ <script async src="https://www.googletagmanager.com/gtag/js?id=UA-127904727-1"></script>
29
+ <script>
30
+ window.dataLayer = window.dataLayer || [];
31
+ function gtag(){dataLayer.push(arguments);}
32
+ gtag('js', new Date());
33
+
34
+ gtag('config', 'UA-127904727-1');
35
+ </script>
36
+
37
+ <!-- javascript -->
38
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
39
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
40
+
41
+
42
+ </head>
43
+
44
+
45
+ <body>
46
+ <main class="page-content" aria-label="Content">
47
+ <div class="wrapper">
48
+ <header class="navbar navbar-inverse normal" role="banner">
49
+ <div class="container">
50
+ <div class="navbar-header">
51
+ <a href="/1.13/1.13" class="navbar-brand">
52
+ <img alt="logo" src="/1.13/assets/img/logo.png">
53
+ </a>
54
+ </div>
55
+ <nav class="" role="navigation">
56
+ <ul class="nav navbar-nav nav-links">
57
+ <li>
58
+ <a class="quickstart nav-link" href="/1.13/quickstart">Quickstart</a>
59
+ </li>
60
+ <li>
61
+ <a class="guides nav-link" href="/1.13/guides">Guides</a>
62
+ </li>
63
+ <li>
64
+ <a class="tutorial nav-link" href="/1.13/tutorial">Tutorial</a>
65
+ </li>
66
+ <li>
67
+ <a class="spraypaint nav-link" href="/1.13/js">Spraypaint</a>
68
+ </li>
69
+ </ul>
70
+ <ul class="nav gh navbar-nav navbar-right visible-lg visible-md">
71
+ <li>
72
+ <span class="star">⭐</span>
73
+ <a href="https://github.com/graphiti-api/graphiti">
74
+ <img alt="github-star" style="margin-right: 65px;margin-top: -20px" src="/1.13/assets/img/gh.png">
75
+ </a>
76
+ </li>
77
+ </ul>
78
+ </nav>
79
+ </div>
80
+ </header>
81
+
82
+ <div class="container">
83
+ <h1>
84
+ Spraypaint
85
+ <small>the isomorphic, framework-agnostic Graphiti ORM</small>
86
+ </h1>
87
+
88
+ <div class="js-toc col-md-3">
89
+ <ul>
90
+ <li><a href="/1.13/js/index">Home</a></li>
91
+ <li><a href="/1.13/js/introduction">Introduction</a></li>
92
+ <li><a href="/1.13/js/installation">Installation</a>
93
+ <ul>
94
+ <li><a href="/1.13/js/installation#typescript">Typescript</a></li>
95
+ <li><a href="/1.13/js/installation#defining-models">Defining Models</a></li>
96
+ <li><a href="/1.13/js/installation#connecting-to-the-api">Connecting to the API</a></li>
97
+ <li><a href="/1.13/js/installation#defining-attributes">Defining Attributes</a></li>
98
+ <li><a href="/1.13/js/installation#defining-relationships">Defining Relationships</a></li>
99
+ </ul>
100
+ </li>
101
+ <li><a href="/1.13/js/reads">Reads</a>
102
+ <ul>
103
+ <li><a href="/1.13/js/reads/sorting">Sorting</a></li>
104
+ <li><a href="/1.13/js/reads/pagination">Pagination</a></li>
105
+ <li><a href="/1.13/js/reads/filtering">Filtering</a></li>
106
+ <li><a href="/1.13/js/reads/fieldsets">Fieldsets</a></li>
107
+ <li><a href="/1.13/js/reads/statistics">Statistics</a></li>
108
+ <li><a href="/1.13/js/reads/includes">Includes</a></li>
109
+ <li><a href="/1.13/js/reads/nested-queries">Nested Queries</a></li>
110
+ </ul>
111
+ </li>
112
+ <li><a href="/1.13/js/writes">Writes</a>
113
+ <ul>
114
+ <li><a href="/1.13/js/writes/validations">Validations</a></li>
115
+ <li><a href="/1.13/js/writes/dirty-tracking">Dirty Tracking</a></li>
116
+ <li><a href="/1.13/js/writes/nested">Nested Writes</a></li>
117
+ <li><a href="/1.13/js/writes/deferred">Deferred Action</a></li>
118
+ </ul>
119
+ </li>
120
+ <li><a href="/1.13/js/middleware">Middleware</a></li>
121
+ <li><a href="/1.13/js/authentication">Authentication</a></li>
122
+ <li><a href="/1.13/js/state-syncing">State Syncing</a></li>
123
+ <li><a href="/1.13/js/ddau">Data Down, Actions Up</a></li>
124
+ <li><a href="/1.13/js/extra-params">Extra params</a></li>
125
+ </ul>
126
+ </div>
127
+
128
+ <div class="col-md-8 col-md-offset-1">
129
+ <h3 id="validations">Validations</h3>
130
+
131
+ <p>JSONAPI Suite is already set up to return validation errors with a
132
+ <code class="language-plaintext highlighter-rouge">422</code> response code and JSONAPI-compliant <a href="http://jsonapi.org/format/#errors">errors payload</a>. Those errors will be automatically assigned, and removed on subsequent requests:</p>
133
+
134
+ <div class="tabs">
135
+ <div class="tab typescript active">
136
+ <span>Typescript</span>
137
+ </div>
138
+ <div class="tab javascript">
139
+ <span>Javascript</span>
140
+ </div>
141
+ </div>
142
+
143
+ <div class="code-tabs">
144
+
145
+ <figure class="highlight"><pre><code class="language-typescript" data-lang="typescript"> <span class="kd">let</span> <span class="nx">success</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
146
+ <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="c1">// false</span>
147
+ <span class="nx">post</span><span class="p">.</span><span class="nx">errors</span><span class="p">.</span><span class="nx">title</span> <span class="c1">// { message: "Can't be blank", ... }</span>
148
+ <span class="nx">post</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">no longer blank</span><span class="dl">"</span>
149
+ <span class="nx">success</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">()</span>
150
+ <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="c1">// true</span>
151
+ <span class="nx">post</span><span class="p">.</span><span class="nx">errors</span> <span class="c1">// {}</span>
152
+ </code></pre></figure>
153
+
154
+ <figure class="highlight"><pre><code class="language-javascript" data-lang="javascript"> <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">().</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
155
+ <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="c1">// false</span>
156
+ <span class="nx">post</span><span class="p">.</span><span class="nx">errors</span><span class="p">.</span><span class="nx">title</span> <span class="c1">// { message: "Can't be blank", ... }</span>
157
+ <span class="nx">post</span><span class="p">.</span><span class="nx">title</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">no longer blank</span><span class="dl">"</span>
158
+ <span class="nx">post</span><span class="p">.</span><span class="nf">save</span><span class="p">().</span><span class="nf">then</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">success</span><span class="p">)</span> <span class="p">{</span>
159
+ <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">success</span><span class="p">);</span> <span class="c1">// true</span>
160
+ <span class="nx">post</span><span class="p">.</span><span class="nx">errors</span> <span class="c1">// {}</span>
161
+ <span class="p">});</span>
162
+ <span class="p">})</span>
163
+ </code></pre></figure>
164
+
165
+ </div>
166
+
167
+ <div class="clearfix">
168
+ <h2 id="next">
169
+ <a href="/1.13/js/writes/dirty-tracking">
170
+ NEXT:
171
+ <small>Dirty Tracking</small>
172
+ &raquo;
173
+ </a>
174
+ </h2>
175
+ </div>
176
+ </div>
177
+
178
+ </div>
179
+ </div>
180
+ </main>
181
+ <div class="main-footer main-footer--dark">
182
+ <div class="container">
183
+ <div class="row">
184
+ <div class="col-sm-4 menu">
185
+ <h3>Overview</h3>
186
+ <ul>
187
+ <li>
188
+ <a href="/1.13/quickstart">Quickstart</a>
189
+ </li>
190
+ <li>
191
+ <a href="/1.13/tutorial">Tutorial</a>
192
+ </li>
193
+ <li>
194
+ <a href="/1.13/guides">Guides</a>
195
+ </li>
196
+ </ul>
197
+ </div>
198
+ <div class="col-sm-4 menu">
199
+ <h3>Contact</h3>
200
+ <ul>
201
+ <li>
202
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
203
+ </li>
204
+ <li>
205
+ <a href="mailto:richmolj@gmail.com">Email</a>
206
+ </li>
207
+ </ul>
208
+ </div>
209
+ <div class="col-sm-4 menu">
210
+ <h3>Related</h3>
211
+ <ul>
212
+ <li>
213
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
214
+ </li>
215
+ <li>
216
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
217
+ </li>
218
+ <li>
219
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <script type="text/javascript">
228
+ $(function () {
229
+
230
+ var flipTabs = function() {
231
+ var isTS = true;
232
+ if (localStorage.getItem('js-lang') === 'javascript') {
233
+ isTS = false;
234
+ }
235
+
236
+ $('.code-tabs').each(function(index, el) {
237
+ if (isTS) {
238
+ console.log('hiding js');
239
+ $($(el).children()[1]).hide();
240
+ $($(el).children()[0]).show();
241
+ } else {
242
+ console.log('hiding ts');
243
+ $($(el).children()[0]).hide();
244
+ $($(el).children()[1]).show();
245
+ }
246
+ });
247
+
248
+ if (isTS) {
249
+ $('.tab.typescript').addClass('active');
250
+ $('.tab.javascript').removeClass('active');
251
+ } else {
252
+ $('.tab.typescript').removeClass('active');
253
+ $('.tab.javascript').addClass('active');
254
+ }
255
+ }
256
+
257
+ $('.tab').click(function() {
258
+ if ($(this).hasClass('typescript')) {
259
+ localStorage.setItem('js-lang', 'typescript');
260
+ } else {
261
+ localStorage.setItem('js-lang', 'javascript');
262
+ }
263
+
264
+ flipTabs();
265
+ });
266
+
267
+ flipTabs();
268
+ })
269
+ </script>
270
+
271
+ </body>
272
+ </html>