add contrib examples template

jspsych · Aug 8, 2024 · 6e10d74 · 6e10d74
1 parent de10801
commit 6e10d74
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 5 deletions.
diff --git a/templates/cli/src/index.js b/templates/cli/src/index.js
@@ -43,14 +43,14 @@ async function runPrompts() {
   const language = await select({
     message: "What language do you want to use?",
     choices: [
-      {
-        name: "TypeScript",
-        value: "ts",
-      },
       {
         name: "JavaScript",
         value: "js",
       },
+      {
+        name: "TypeScript",
+        value: "ts",
+      },
     ],
     loop: false,
   });
@@ -125,6 +125,13 @@ async function processAnswers(answers) {
       .pipe(dest(`${repoRoot}/packages/${destPath}`));
   }
 
+  function renameExampleTemplate() {
+    return src(`${repoRoot}/packages/${destPath}/examples/index.html`)
+      .pipe(replace("{name}", answers.name))
+      .pipe(replace("{globalName}", globalName))
+      .pipe(dest(`${repoRoot}/packages/${destPath}/examples`));
+  }
+
   function renameDocsTemplate() {
     return src(`${repoRoot}/packages/${destPath}/docs/docs-template.md`)
       .pipe(rename(`${answers.name}.md`))
@@ -133,7 +140,8 @@ async function processAnswers(answers) {
         deleteSync(`${repoRoot}/packages/${destPath}/docs/docs-template.md`);
       });
   }
-  series(processTemplate, renameDocsTemplate)();
+
+  series(processTemplate, renameExampleTemplate, renameDocsTemplate)();
 }
 
 const answers = await runPrompts();

diff --git a/templates/extension-template-js/examples/index.html b/templates/extension-template-js/examples/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{name} Extension Example</title>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <!-- Example plugin an extension may work with -->
+    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+    <script src="../dist/index.browser.min.js"></script>
+    <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script>
+      let jsPsych = initJsPsych({
+        extensions: [{ type: {globalName} }],
+      });
+
+      let trial = {
+        type: jsPsychHtmlKeyboardResponse,
+        stimulus: "Hello world",
+        extensions: [{ type: {globalName} },
+        ],
+      };
+
+      jsPsych.run([trial]);
+    </script>
+  </body>
+</html>
diff --git a/templates/extension-template-js/index.js → templates/extension-template-js/src/index.js b/templates/extension-template-js/index.js → templates/extension-template-js/src/index.js
diff --git a/templates/extension-template-ts/examples/index.html b/templates/extension-template-ts/examples/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>{name} Extension Example</title>
+    <script src="https://unpkg.com/[email protected]"></script>
+    <!-- Example plugin an extension may work with -->
+    <script src="https://unpkg.com/@jspsych/[email protected]"></script>
+    <script src="../dist/index.browser.min.js"></script>
+    <link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" />
+  </head>
+  <body>
+    <script>
+      let jsPsych = initJsPsych({
+        extensions: [{ type: {globalName} }],
+      });
+
+      let trial = {
+        type: jsPsychHtmlKeyboardResponse,
+        stimulus: "Hello world",
+        extensions: [{ type: {globalName} },
+        ],
+      };
+
+      jsPsych.run([trial]);
+    </script>
+  </body>
+</html>
diff --git a/templates/plugin-template-js/examples/index.html b/templates/plugin-template-js/examples/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://unpkg.com/jspsych"></script>
+  <!-- The plugin is loaded here -->
+  <script src="https://unpkg.com/@jspsych/plugin-{name}"></script>
+  <script src="../dist/index.global.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
+</head>
+
+<body></body>
+<script>
+  const jsPsych = initJsPsych();
+
+  const trial = {
+    type: {globalName}
+  };
+
+  jsPsych.run([trial])
+</script>
+
+</html>
diff --git a/templates/plugin-template-js/index.js → templates/plugin-template-js/src/index.js b/templates/plugin-template-js/index.js → templates/plugin-template-js/src/index.js
diff --git a/templates/plugin-template-ts/examples/index.html b/templates/plugin-template-ts/examples/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <script src="https://unpkg.com/jspsych"></script>
+  <!-- The plugin is loaded here -->
+  <script src="https://unpkg.com/@jspsych/plugin-{name}"></script>
+  <script src="../dist/index.global.js"></script>
+  <link rel="stylesheet" href="https://unpkg.com/jspsych/css/jspsych.css">
+</head>
+
+<body></body>
+<script>
+  const jsPsych = initJsPsych();
+
+  const trial = {
+    type: {globalName}
+  };
+
+  jsPsych.run([trial])
+</script>
+
+</html>