Cleanup examples and add notes for JS usage (#84)

ardatan · web-flow · commit 74f5e953f7dc · 2022-05-19T15:05:57.000+03:00
* Cleanup examples

* Add docs for JavaScript usage
diff --git a/README.md b/README.md
@@ -105,6 +105,19 @@ async function main() {
 main()
 ```
 
+### Using vanilla JavaScript instead of TypeScript
+
+GraphClient CLI generates the client artifacts as TypeScript files by default but you can configure CLI to generate JavaScript and JSON files together with additional TypeScript definition files by using `--fileType js` or `--fileType json`.
+
+`js` flag generates all files as JavaScript files with ESM Syntax and `json` flag generates source artifacts as JSON files while entrypoint JavaScript file with old CommonJS syntax because only CommonJS supports JSON files as modules.
+
+Unless you use CommonJS(`require`) specifically, we'd recommend you to use `js` flag.
+
+`graphclient --fileType js`
+
+- [An example for JavaScript usage in CommonJS syntax with JSON files](/examples/javascript-cjs/)
+- [An example for JavaScript usage in ESM syntax](/examples/javascript-esm/)
+
 #### The Graph Client DevTools
 
 The Graph Client CLI comes with a built-in GraphiQL so you can experiemnt with queries in real time.
diff --git a/examples/apollo/index.html b/examples/apollo/index.html
@@ -9,13 +9,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      setImmediate = (fn) => setTimeout(fn)
-      process = {
-        env: {
-          DEBUG: 1,
-        },
-      }
-    </script>
   </body>
 </html>
diff --git a/examples/apollo/vite.config.ts b/examples/apollo/vite.config.ts
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    process: JSON.stringify({
+      env: {
+        DEBUG: 1,
+      },
+    }),
+  },
 })
diff --git a/examples/execute/index.html b/examples/execute/index.html
@@ -9,13 +9,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      setImmediate = (fn) => setTimeout(fn)
-      process = {
-        env: {
-          DEBUG: 1,
-        },
-      }
-    </script>
   </body>
 </html>
diff --git a/examples/execute/vite.config.ts b/examples/execute/vite.config.ts
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    process: JSON.stringify({
+      env: {
+        DEBUG: 1,
+      },
+    }),
+  },
 })
diff --git a/examples/react-query/index.html b/examples/react-query/index.html
@@ -9,13 +9,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      setImmediate = (fn) => setTimeout(fn)
-      process = {
-        env: {
-          DEBUG: 1,
-        },
-      }
-    </script>
   </body>
 </html>
diff --git a/examples/react-query/vite.config.ts b/examples/react-query/vite.config.ts
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    process: JSON.stringify({
+      env: {
+        DEBUG: 1,
+      },
+    }),
+  },
 })
diff --git a/examples/urql/index.html b/examples/urql/index.html
@@ -9,13 +9,5 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    <script>
-      setImmediate = (fn) => setTimeout(fn)
-      process = {
-        env: {
-          DEBUG: 1,
-        },
-      }
-    </script>
   </body>
 </html>
diff --git a/examples/urql/vite.config.ts b/examples/urql/vite.config.ts
@@ -4,4 +4,11 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    process: JSON.stringify({
+      env: {
+        DEBUG: 1,
+      },
+    }),
+  },
 })
