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
data/website/static/1.13/tutorial/step_1.html ADDED
@@ -0,0 +1,517 @@
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
+ <div class="toc col-md-3">
84
+ <h1 id="tutorial">Tutorial</h1>
85
+
86
+ <ul>
87
+ <li><a href="/1.13/tutorial/step_0">Step 0: Bootstrapping</a></li>
88
+ <li><a href="/1.13/tutorial/step_1">Step 1: Initial Resource</a></li>
89
+ <li><a href="/1.13/tutorial/step_2">Step 2: Has Many</a></li>
90
+ <li><a href="/1.13/tutorial/step_3">Step 3: Belongs To</a></li>
91
+ <li><a href="/1.13/tutorial/step_4">Step 4: Customizing Queries</a></li>
92
+ <li><a href="/1.13/tutorial/step_5">Step 5: Has One</a></li>
93
+ <li><a href="/1.13/tutorial/step_6">Step 6: Customizing Writes</a></li>
94
+ <li><a href="/1.13/tutorial/step_7">Step 7: Many-to-Many</a></li>
95
+ <li><a href="/1.13/tutorial/step_8">Step 8: Polymorphic Relationships</a></li>
96
+ <li><a href="/1.13/tutorial/step_9">Step 9: Polymorphic Resources</a></li>
97
+ </ul>
98
+ </div>
99
+
100
+ <div class="col-md-8">
101
+
102
+ <h2 id="step-1-basic-resource">Step 1: Basic Resource</h2>
103
+
104
+ <blockquote>
105
+ <p><a href="https://github.com/graphiti-api/employee_directory/commit/45c1c92e14fb1c3a47b8ed246ceb2cba50e97c72">View the Diff</a></p>
106
+ </blockquote>
107
+
108
+ <p>We’ll be working with a single database table, <code class="language-plaintext highlighter-rouge">employees</code>:</p>
109
+
110
+ <table class="table table-small">
111
+ <thead>
112
+ <tr>
113
+ <th>id</th>
114
+ <th>first_name</th>
115
+ <th>last_name</th>
116
+ <th>age</th>
117
+ <th>created_at</th>
118
+ <th>updated_at</th>
119
+ </tr>
120
+ </thead>
121
+ <tbody>
122
+ <tr>
123
+ <td>1</td>
124
+ <td>Homer</td>
125
+ <td>Simpson</td>
126
+ <td>39</td>
127
+ <td>2018-09-04</td>
128
+ <td>2018-09-04</td>
129
+ </tr>
130
+ <tr>
131
+ <td>2</td>
132
+ <td>Waylon</td>
133
+ <td>Smithers</td>
134
+ <td>65</td>
135
+ <td>2018-09-04</td>
136
+ <td>2018-09-04</td>
137
+ </tr>
138
+ <tr>
139
+ <td>3</td>
140
+ <td>Monty</td>
141
+ <td>Burns</td>
142
+ <td>123</td>
143
+ <td>2018-09-04</td>
144
+ <td>2018-09-04</td>
145
+ </tr>
146
+ </tbody>
147
+ </table>
148
+
149
+ <h3 id="the-rails-stuff-">The Rails Stuff 🚂</h3>
150
+
151
+ <p>Use the built-in generator to create the database table
152
+ and corresponding <code class="language-plaintext highlighter-rouge">ActiveRecord</code> model:</p>
153
+
154
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>bin/rails g model Employee first_name:string last_name:string age:integer
155
+ <span class="nv">$ </span>bin/rails db:migrate</code></pre></figure>
156
+
157
+ <p>Now let’s seed some random development data, using <a href="https://github.com/stympy/faker">Faker</a> (which was installed in <a href="/1.13/tutorial/step_0">Step 0</a>):</p>
158
+
159
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># db/seeds.rb</span>
160
+ <span class="no">Employee</span><span class="p">.</span><span class="nf">delete_all</span> <span class="c1"># Ensure the DB is cleaned each run</span>
161
+
162
+ <span class="mi">100</span><span class="p">.</span><span class="nf">times</span> <span class="k">do</span>
163
+ <span class="no">Employee</span><span class="p">.</span><span class="nf">create!</span> <span class="ss">first_name: </span><span class="no">Faker</span><span class="o">::</span><span class="no">Name</span><span class="p">.</span><span class="nf">first_name</span><span class="p">,</span>
164
+ <span class="ss">last_name: </span><span class="no">Faker</span><span class="o">::</span><span class="no">Name</span><span class="p">.</span><span class="nf">last_name</span><span class="p">,</span>
165
+ <span class="ss">age: </span><span class="nb">rand</span><span class="p">(</span><span class="mi">20</span><span class="o">..</span><span class="mi">80</span><span class="p">)</span>
166
+ <span class="k">end</span></code></pre></figure>
167
+
168
+ <p>Run this seed file with</p>
169
+
170
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>bin/rails db:seed</code></pre></figure>
171
+
172
+ <h3 id="the-graphiti-stuff-">The Graphiti Stuff 🎨</h3>
173
+
174
+ <p>Just like Rails, Graphiti has built-in generators. Let’s generate
175
+ the corresponding Resource for our <code class="language-plaintext highlighter-rouge">Employee</code> model:</p>
176
+
177
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>bin/rails g graphiti:resource Employee first_name:string last_name:string age:integer created_at:datetime updated_at:datetime</code></pre></figure>
178
+
179
+ <p>This generated a few things, but for now let’s focus on
180
+ <code class="language-plaintext highlighter-rouge">EmployeeResource</code>:</p>
181
+
182
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">class</span> <span class="nc">EmployeeResource</span> <span class="o">&lt;</span> <span class="no">ApplicationResource</span>
183
+ <span class="n">attribute</span> <span class="ss">:first_name</span><span class="p">,</span> <span class="ss">:string</span>
184
+ <span class="n">attribute</span> <span class="ss">:last_name</span><span class="p">,</span> <span class="ss">:string</span>
185
+ <span class="n">attribute</span> <span class="ss">:age</span><span class="p">,</span> <span class="ss">:integer</span>
186
+ <span class="n">attribute</span> <span class="ss">:created_at</span><span class="p">,</span> <span class="ss">:datetime</span><span class="p">,</span> <span class="ss">writable: </span><span class="kp">false</span>
187
+ <span class="n">attribute</span> <span class="ss">:updated_at</span><span class="p">,</span> <span class="ss">:datetime</span><span class="p">,</span> <span class="ss">writable: </span><span class="kp">false</span>
188
+ <span class="k">end</span></code></pre></figure>
189
+
190
+ <p>This code defined the <a href="https://restful-api-design.readthedocs.io/en/latest/resources.html">RESTful Resource</a> we want our API to expose. Let’s run our server and see what it does:</p>
191
+
192
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>bin/rails s</code></pre></figure>
193
+
194
+ <p>Visit <code class="language-plaintext highlighter-rouge">localhost:3000/api/v1/employees</code>. You should see a <a href="http://jsonapi.org">JSONAPI Response</a>:</p>
195
+
196
+ <p><br /></p>
197
+
198
+ <p><img src="https://user-images.githubusercontent.com/55264/45096386-710a3700-b0ee-11e8-8586-a7e342cca274.png" alt="jsonapi" /></p>
199
+
200
+ <p><br /></p>
201
+
202
+ <p>If you find the payload a little intimidating, add <code class="language-plaintext highlighter-rouge">.json</code> to the URL for a more traditional response:</p>
203
+
204
+ <p><br /></p>
205
+
206
+ <p><img src="https://user-images.githubusercontent.com/55264/45051465-2509b480-b052-11e8-9be4-3424ca611289.png" alt="json" /></p>
207
+
208
+ <p><br /></p>
209
+
210
+ <p>There’s <code class="language-plaintext highlighter-rouge">.xml</code>, too:</p>
211
+
212
+ <p><br /></p>
213
+
214
+ <p><img src="https://user-images.githubusercontent.com/55264/45051468-263ae180-b052-11e8-9a1d-b91e1caa1bbf.png" alt="xml" /></p>
215
+
216
+ <p><br /></p>
217
+
218
+ <p>These are all different <strong>renderings</strong> of the same <code class="language-plaintext highlighter-rouge">EmployeeResource</code>.</p>
219
+
220
+ <p><code class="language-plaintext highlighter-rouge">Resources</code> are comprised of <code class="language-plaintext highlighter-rouge">Attribute</code>s:</p>
221
+
222
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># app/resources/employee_resource.rb</span>
223
+ <span class="n">attribute</span> <span class="ss">:first_name</span><span class="p">,</span> <span class="ss">:string</span></code></pre></figure>
224
+
225
+ <p>Each attribute defines behavior for:</p>
226
+
227
+ <ul>
228
+ <li>Reading (display)</li>
229
+ <li>Writing</li>
230
+ <li>Sorting</li>
231
+ <li>Filtering</li>
232
+ <li>Fieldsets</li>
233
+ </ul>
234
+
235
+ <p>Let’s start with simple display, turning <code class="language-plaintext highlighter-rouge">first_name</code> into all capital
236
+ letters:</p>
237
+
238
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># app/resources/employee_resource.rb</span>
239
+ <span class="n">attribute</span> <span class="ss">:first_name</span><span class="p">,</span> <span class="ss">:string</span> <span class="k">do</span>
240
+ <span class="c1"># @object is your model instance</span>
241
+ <span class="vi">@object</span><span class="p">.</span><span class="nf">first_name</span><span class="p">.</span><span class="nf">upcase</span>
242
+ <span class="k">end</span></code></pre></figure>
243
+
244
+ <p>Which gives us:</p>
245
+
246
+ <p><img src="https://user-images.githubusercontent.com/55264/45098021-25598c80-b0f2-11e8-965e-c245f91899ce.png" alt="" /></p>
247
+
248
+ <p><br /></p>
249
+
250
+ <p>This is the most important thing to understand about Resources: they are
251
+ just a collection of defaults, all of which can be overridden. In other
252
+ words:</p>
253
+
254
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="n">attribute</span> <span class="ss">:first_name</span>
255
+
256
+ <span class="c1"># is the same as</span>
257
+
258
+ <span class="n">attribute</span> <span class="ss">:first_name</span> <span class="k">do</span>
259
+ <span class="vi">@object</span><span class="p">.</span><span class="nf">first_name</span>
260
+ <span class="k">end</span></code></pre></figure>
261
+
262
+ <p>We’ll go into further Resource customizations over the course of this
263
+ tutorial. For now, let’s just verify our out-of-the-box defaults:</p>
264
+
265
+ <ul>
266
+ <li>Sort by <code class="language-plaintext highlighter-rouge">first_name</code> ascending: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?sort=first_name</code></li>
267
+ <li>Sort by <code class="language-plaintext highlighter-rouge">first_name</code> descending: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?sort=-first_name</code></li>
268
+ <li>Return only <code class="language-plaintext highlighter-rouge">age</code> and <code class="language-plaintext highlighter-rouge">created_at</code> in the response: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?fields[employees]=age,created_at</code></li>
269
+ <li>Filter on <code class="language-plaintext highlighter-rouge">first_name</code>:
270
+ <ul>
271
+ <li>Case-insensitive: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[first_name]=bob</code></li>
272
+ <li>Case-sensitive: <code class="language-plaintext highlighter-rouge">http://locahost:3000/api/v1/employees?filter[first_name][eql]=Bob</code></li>
273
+ <li>Prefix: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[first_name][prefix]=b</code></li>
274
+ <li>Suffix: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[first_name][suffix]=ob</code></li>
275
+ <li>Contains: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[first_name][match]=o</code></li>
276
+ </ul>
277
+ </li>
278
+ <li>Filter on <code class="language-plaintext highlighter-rouge">age</code>:
279
+ <ul>
280
+ <li>Equal: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[age]=39</code></li>
281
+ <li>Greater Than: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[age][gt]=39</code></li>
282
+ <li>Greater Than or Equal To: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[age][gte]=39</code></li>
283
+ <li>Less Than: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[age][lt]=65</code></li>
284
+ <li>Less Than or Equal To: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?filter[age][lte]=65</code></li>
285
+ </ul>
286
+ </li>
287
+ <li>Paginate
288
+ <ul>
289
+ <li>10 per page: <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?page[size]=10</code></li>
290
+ <li>5 per page, third page:
291
+ <code class="language-plaintext highlighter-rouge">http://localhost:3000/api/v1/employees?page[number]=3</code></li>
292
+ </ul>
293
+ </li>
294
+ </ul>
295
+
296
+ <p>Write operations are easiest to verify with integration tests, which
297
+ were created when we generated our Resource. Let’s take a look at the
298
+ test for creating <code class="language-plaintext highlighter-rouge">Employee</code>s:</p>
299
+
300
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># spec/api/v1/employees/create_spec.rb</span>
301
+
302
+ <span class="no">RSpec</span><span class="p">.</span><span class="nf">describe</span> <span class="s2">"employees#create"</span><span class="p">,</span> <span class="ss">type: :request</span> <span class="k">do</span>
303
+ <span class="n">subject</span><span class="p">(</span><span class="ss">:make_request</span><span class="p">)</span> <span class="k">do</span>
304
+ <span class="n">jsonapi_post</span> <span class="s2">"/api/v1/employees"</span><span class="p">,</span> <span class="n">payload</span>
305
+ <span class="k">end</span>
306
+
307
+ <span class="n">describe</span> <span class="s1">'basic create'</span> <span class="k">do</span>
308
+ <span class="n">let</span><span class="p">(</span><span class="ss">:payload</span><span class="p">)</span> <span class="k">do</span>
309
+ <span class="p">{</span>
310
+ <span class="ss">data: </span><span class="p">{</span>
311
+ <span class="ss">type: </span><span class="s1">'employees'</span><span class="p">,</span>
312
+ <span class="ss">attributes: </span><span class="p">{</span>
313
+ <span class="c1"># ... your attrs here</span>
314
+ <span class="p">}</span>
315
+ <span class="p">}</span>
316
+ <span class="p">}</span>
317
+ <span class="k">end</span>
318
+
319
+ <span class="n">it</span> <span class="s1">'works'</span> <span class="k">do</span>
320
+ <span class="n">expect</span><span class="p">(</span><span class="no">EmployeeResource</span><span class="p">).</span><span class="nf">to</span> <span class="n">receive</span><span class="p">(</span><span class="ss">:build</span><span class="p">).</span><span class="nf">and_call_original</span>
321
+ <span class="n">expect</span> <span class="p">{</span>
322
+ <span class="n">make_request</span>
323
+ <span class="p">}.</span><span class="nf">to</span> <span class="n">change</span> <span class="p">{</span> <span class="no">Employee</span><span class="p">.</span><span class="nf">count</span> <span class="p">}.</span><span class="nf">by</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
324
+ <span class="n">expect</span><span class="p">(</span><span class="n">response</span><span class="p">.</span><span class="nf">status</span><span class="p">).</span><span class="nf">to</span> <span class="n">eq</span><span class="p">(</span><span class="mi">201</span><span class="p">)</span>
325
+ <span class="k">end</span>
326
+ <span class="k">end</span>
327
+ <span class="k">end</span></code></pre></figure>
328
+
329
+ <p>This is an <strong>API Spec</strong>, which tests high-level end-to-end functionality. We
330
+ know that if our API receives a POST with the given payload, an
331
+ <code class="language-plaintext highlighter-rouge">Employee</code> will be created and a <code class="language-plaintext highlighter-rouge">201</code> response code will be returned.</p>
332
+
333
+ <p>API specs are high-level - often they won’t be changed past this initial
334
+ boilerplate. For testing <em>logic</em>, use a <strong>Resource Spec</strong>. These
335
+ integration tests hit the database and run logic, but operate without a
336
+ specific request or response:</p>
337
+
338
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># spec/api/v1/employees/create_spec.rb</span>
339
+ <span class="no">RSpec</span><span class="p">.</span><span class="nf">describe</span> <span class="no">EmployeeResource</span><span class="p">,</span> <span class="ss">type: :resource</span> <span class="k">do</span>
340
+ <span class="n">describe</span> <span class="s1">'creating'</span> <span class="k">do</span>
341
+ <span class="n">let</span><span class="p">(</span><span class="ss">:payload</span><span class="p">)</span> <span class="k">do</span>
342
+ <span class="p">{</span>
343
+ <span class="ss">data: </span><span class="p">{</span>
344
+ <span class="ss">type: </span><span class="s1">'employees'</span><span class="p">,</span>
345
+ <span class="ss">attributes: </span><span class="p">{</span>
346
+ <span class="ss">first_name: </span><span class="s1">'Jane'</span>
347
+ <span class="ss">last_name: </span><span class="s1">'Doe'</span>
348
+ <span class="ss">age: </span><span class="mi">30</span>
349
+ <span class="p">}</span>
350
+ <span class="p">}</span>
351
+ <span class="p">}</span>
352
+ <span class="k">end</span>
353
+
354
+ <span class="n">let</span><span class="p">(</span><span class="ss">:instance</span><span class="p">)</span> <span class="k">do</span>
355
+ <span class="no">EmployeeResource</span><span class="p">.</span><span class="nf">build</span><span class="p">(</span><span class="n">payload</span><span class="p">)</span>
356
+ <span class="k">end</span>
357
+
358
+ <span class="n">it</span> <span class="s1">'works'</span> <span class="k">do</span>
359
+ <span class="n">expect</span> <span class="p">{</span>
360
+ <span class="n">expect</span><span class="p">(</span><span class="n">instance</span><span class="p">.</span><span class="nf">save</span><span class="p">).</span><span class="nf">to</span> <span class="n">eq</span><span class="p">(</span><span class="kp">true</span><span class="p">)</span>
361
+ <span class="p">}.</span><span class="nf">to</span> <span class="n">change</span> <span class="p">{</span> <span class="no">Employee</span><span class="p">.</span><span class="nf">count</span> <span class="p">}.</span><span class="nf">by</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span>
362
+ <span class="n">employee</span> <span class="o">=</span> <span class="no">Employee</span><span class="p">.</span><span class="nf">last</span>
363
+ <span class="n">expect</span><span class="p">(</span><span class="n">employee</span><span class="p">.</span><span class="nf">first_name</span><span class="p">).</span><span class="nf">to</span> <span class="n">eq</span><span class="p">(</span><span class="s1">'Jane'</span><span class="p">)</span>
364
+ <span class="n">expect</span><span class="p">(</span><span class="n">employee</span><span class="p">.</span><span class="nf">last_name</span><span class="p">).</span><span class="nf">to</span> <span class="n">eq</span><span class="p">(</span><span class="s1">'Doe'</span><span class="p">)</span>
365
+ <span class="n">expect</span><span class="p">(</span><span class="n">employee</span><span class="p">.</span><span class="nf">age</span><span class="p">).</span><span class="nf">to</span> <span class="n">eq</span><span class="p">(</span><span class="mi">30</span><span class="p">)</span>
366
+ <span class="k">end</span>
367
+ <span class="k">end</span>
368
+ <span class="k">end</span></code></pre></figure>
369
+
370
+ <p>In other words: API specs test Endpoints (request, response, middleware,
371
+ etc), Resource specs test only the Resource (actual application logic).
372
+ Read more in our <a href="/1.13/guides/concepts/testing">Testing Guide</a>.</p>
373
+
374
+ <p>Before we run these specs, we need to edit our <a href="https://github.com/thoughtbot/factory_bot">factories</a> to ensure
375
+ dynamic, randomized data. Let’s change this:</p>
376
+
377
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># spec/factories/employee.rb</span>
378
+
379
+ <span class="no">FactoryBot</span><span class="p">.</span><span class="nf">define</span> <span class="k">do</span>
380
+ <span class="n">factory</span> <span class="ss">:employee</span> <span class="k">do</span>
381
+ <span class="n">first_name</span> <span class="p">{</span> <span class="s2">"MyString"</span> <span class="p">}</span>
382
+ <span class="n">last_name</span> <span class="p">{</span> <span class="s2">"MyString"</span> <span class="p">}</span>
383
+ <span class="n">age</span> <span class="p">{</span> <span class="mi">1</span> <span class="p">}</span>
384
+ <span class="k">end</span>
385
+ <span class="k">end</span></code></pre></figure>
386
+
387
+ <p>To</p>
388
+
389
+ <figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="c1"># spec/factories/employee.rb</span>
390
+
391
+ <span class="no">FactoryBot</span><span class="p">.</span><span class="nf">define</span> <span class="k">do</span>
392
+ <span class="n">factory</span> <span class="ss">:employee</span> <span class="k">do</span>
393
+ <span class="n">first_name</span> <span class="p">{</span> <span class="no">Faker</span><span class="o">::</span><span class="no">Name</span><span class="p">.</span><span class="nf">first_name</span> <span class="p">}</span>
394
+ <span class="n">last_name</span> <span class="p">{</span> <span class="no">Faker</span><span class="o">::</span><span class="no">Name</span><span class="p">.</span><span class="nf">last_name</span> <span class="p">}</span>
395
+ <span class="n">age</span> <span class="p">{</span> <span class="nb">rand</span><span class="p">(</span><span class="mf">20.80</span><span class="p">)</span> <span class="p">}</span>
396
+ <span class="k">end</span>
397
+ <span class="k">end</span></code></pre></figure>
398
+
399
+ <p>Now undo the capitalization change to <code class="language-plaintext highlighter-rouge">attribute :first_name</code>, and run the generated specs:</p>
400
+
401
+ <figure class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>bin/rspec</code></pre></figure>
402
+
403
+ <p>You’ll see 11 tests pass, with 3 pending. One of the pending specs was
404
+ autogenerated by rails - you can delete <code class="language-plaintext highlighter-rouge">spec/models/employee_spec.rb</code>
405
+ for now.</p>
406
+
407
+ <p>That leaves us with two “update” specs. These are marked pending so you
408
+ can manage the data yourself. Follow the comments in these specs to add
409
+ attributes and get them passing.</p>
410
+
411
+ </div>
412
+
413
+ <div class="clearfix">
414
+ <h2 id="next">
415
+ <a href="/1.13/tutorial/step_2">
416
+ NEXT -
417
+ <small>Step 2: Has Many</small>
418
+ &raquo;
419
+ </a>
420
+ </h2>
421
+ </div>
422
+
423
+ </div>
424
+ </div>
425
+ </main>
426
+ <div class="main-footer main-footer--dark">
427
+ <div class="container">
428
+ <div class="row">
429
+ <div class="col-sm-4 menu">
430
+ <h3>Overview</h3>
431
+ <ul>
432
+ <li>
433
+ <a href="/1.13/quickstart">Quickstart</a>
434
+ </li>
435
+ <li>
436
+ <a href="/1.13/tutorial">Tutorial</a>
437
+ </li>
438
+ <li>
439
+ <a href="/1.13/guides">Guides</a>
440
+ </li>
441
+ </ul>
442
+ </div>
443
+ <div class="col-sm-4 menu">
444
+ <h3>Contact</h3>
445
+ <ul>
446
+ <li>
447
+ <a target="_blank" href="https://discord.gg/wgqkMBsSRV">Discord Chat</a>
448
+ </li>
449
+ <li>
450
+ <a href="mailto:richmolj@gmail.com">Email</a>
451
+ </li>
452
+ </ul>
453
+ </div>
454
+ <div class="col-sm-4 menu">
455
+ <h3>Related</h3>
456
+ <ul>
457
+ <li>
458
+ <a target="_blank" href="http://jsonapi.org">JSONAPI Spec</a>
459
+ </li>
460
+ <li>
461
+ <a target="_blank" href="http://jsonapi-rb.org">jsonapi-rb</a>
462
+ </li>
463
+ <li>
464
+ <a target="_blank" href="https://vuejs.org/">VueJS</a>
465
+ </li>
466
+ </ul>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <script type="text/javascript">
473
+ $(function () {
474
+
475
+ var flipTabs = function() {
476
+ var isTS = true;
477
+ if (localStorage.getItem('js-lang') === 'javascript') {
478
+ isTS = false;
479
+ }
480
+
481
+ $('.code-tabs').each(function(index, el) {
482
+ if (isTS) {
483
+ console.log('hiding js');
484
+ $($(el).children()[1]).hide();
485
+ $($(el).children()[0]).show();
486
+ } else {
487
+ console.log('hiding ts');
488
+ $($(el).children()[0]).hide();
489
+ $($(el).children()[1]).show();
490
+ }
491
+ });
492
+
493
+ if (isTS) {
494
+ $('.tab.typescript').addClass('active');
495
+ $('.tab.javascript').removeClass('active');
496
+ } else {
497
+ $('.tab.typescript').removeClass('active');
498
+ $('.tab.javascript').addClass('active');
499
+ }
500
+ }
501
+
502
+ $('.tab').click(function() {
503
+ if ($(this).hasClass('typescript')) {
504
+ localStorage.setItem('js-lang', 'typescript');
505
+ } else {
506
+ localStorage.setItem('js-lang', 'javascript');
507
+ }
508
+
509
+ flipTabs();
510
+ });
511
+
512
+ flipTabs();
513
+ })
514
+ </script>
515
+
516
+ </body>
517
+ </html>