Update examples and Readme

Author: mayank1513

.tkb

@@ -1,31 +1,11 @@
 {
   "scope": "Workspace",
-  "tasks": {
-    "P_NrSJQ8m91Odgz8E1fS6": {
-      "id": "P_NrSJQ8m91Odgz8E1fS6",
-      "description": "Create your library and update examples",
-      "columnId": "column-todo"
-    },
-    "1dRWJhy45E1Rq5wZAmPHt": {
-      "id": "1dRWJhy45E1Rq5wZAmPHt",
-      "description": "Update README as required",
-      "columnId": "column-todo"
-    },
-    "O1qAByMoxhHOR-a_guL91": {
-      "id": "O1qAByMoxhHOR-a_guL91",
-      "description": "Optionally deploy your examples to Vercel.",
-      "columnId": "column-todo"
-    }
-  },
+  "tasks": {},
   "columns": [
     {
       "id": "column-todo",
       "title": "To do",
-      "tasksIds": [
-        "P_NrSJQ8m91Odgz8E1fS6",
-        "1dRWJhy45E1Rq5wZAmPHt",
-        "O1qAByMoxhHOR-a_guL91"
-      ]
+      "tasksIds": []
     },
     {
       "id": "column-doing",

README.md

@@ -74,6 +74,17 @@ export default defineConfig({
 
 ---
 
+## IDE Setup for IntelliSense and Type Checking
+
+Add following to your declaration file. If you do not have one, create `declarations.d.ts` file and add following.
+
+```typescript
+declare module "*?raw" {
+  const value: string;
+  export default value;
+}
+```
+
 ## Importing Files as Raw Text
 
 With the plugin enabled, you can import files as raw text directly:

packages/shared/src/client/demo/demo.tsx

@@ -4,19 +4,13 @@ import styles from "./demo.module.scss";
 import { LiveProvider, LiveEditor, LivePreview } from "react-live";
 import { Dots1, Dots2, Bars1, Bars2 } from "react18-loaders/dist/server";
 import text from "./index.ts?raw";
-
-const code = `
-// available components Dots1, Dots2, Bars1, Bars2
-<div className="${styles.center}">
- <Bars1 color="var(--text-color)"/>
-</div>
-`;
+import code from "./loader-demo.tsx?raw";
 
 /** React live demo */
 export function Demo() {
   console.log({ text });
   return (
-    <LiveProvider code={code} scope={{ Dots1, Dots2, Bars1, Bars2 }}>
+    <LiveProvider code={code.replace(/import.*/, "")} scope={{ Dots1, Dots2, Bars1, Bars2 }}>
       <div className={styles.demo}>
         <LiveEditor className={styles.code} />
         <LivePreview className={styles.preview} />

packages/shared/src/client/demo/loader-demo.tsx

@@ -0,0 +1,8 @@
+import { Bars1 } from "react18-loaders/dist/server";
+// Using esbuild-raw-plugin, we embedded this code into
+// a .tsx file, enabling IDE IntelliSense support.
+
+// available components Dots1, Dots2, Bars1, Bars2
+<div className="${styles.center}">
+  <Bars1 color="var(--text-color)" />
+</div>;

packages/shared/src/declaration.d.ts

@@ -1,3 +1,6 @@
 declare module "*.module.css";
 declare module "*.module.scss";
-declare module "*?raw";
+declare module "*?raw" {
+  const value: string;
+  export default value;
+}