Add js sdk folder to fish-tank

.github/workflows/precommit.yml

@@ -5,7 +5,7 @@ on:
     types: [opened, synchronize, reopened]
 
 jobs:
-  pre-commit:
+  python-pre-commit:
     name: Pre-commit checks
     runs-on: ubuntu-latest
     steps:
@@ -49,3 +49,27 @@ jobs:
         continue-on-error: true
         with:
           pylance-version: latest-release
+
+  js-pre-commit:
+    name: JS Pre-commit checks
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        working-directory: ./javascript-sdk
+        run: npm install
+
+      - name: Run ESLint
+        working-directory: ./javascript-sdk
+        run: npm run lint
+
+      - name: Run Prettier
+        working-directory: ./javascript-sdk
+        run: npx prettier --check .

.gitignore

@@ -36,3 +36,5 @@ logs/
 tmp/
 
 *env.local
+
+javascript-sdk/node_modules

.vscode/extensions.json

@@ -4,6 +4,8 @@
     "GitHub.copilot",
     "esbenp.prettier-vscode",
     "ms-python.isort",
-    "ms-python.pylint"
+    "ms-python.pylint",
+    "dbaeumer.vscode-eslint",
+    "yoavbls.pretty-ts-errors",
   ]
-}
+}

.vscode/settings.json

@@ -8,6 +8,18 @@
   "[json]": {
     "editor.defaultFormatter": "vscode.json-language-features"
   },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "eslint.workingDirectories": [
+    {
+      "directory": "./javascript-sdk",
+      "changeProcessCWD": true
+    }
+  ],
   "editor.formatOnSave": true,
   "files.insertFinalNewline": true,
   "black-formatter.args": [

javascript-sdk/.eslintrc.js

@@ -0,0 +1,16 @@
+/* eslint-env node */
+module.exports = {
+  root: true,
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true  
+  },
+  "extends": [
+    "eslint:recommended", "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+};

javascript-sdk/.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 100,
+  trailingComma: 'all',
+  singleQuote: true,
+  importOrder: ['<THIRD_PARTY_MODULES>', '^@/types/(.*)$', '^@/lib/(.*)$', '^[./]'],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true,
+  importOrderCaseInsensitive: false,
+};

javascript-sdk/examples/first-steps/README.md

@@ -0,0 +1,17 @@
+# Example script: collecting pricing data from e-commerce website using AgentQL
+
+This is an example of collecting pricing data from e-commerce website using AgentQL.
+
+## Run the script
+
+- [Install AgentQL SDK](https://docs.agentql.com/javascript-sdk/installation)
+- Save this python file locally as **first_steps.js**
+- Run the following command from the project's folder:
+
+```bash
+node first_steps.js
+```
+
+## Play with the query
+
+Install the [AgentQL Debugger Chrome extension](https://docs.agentql.com/installation/chrome-extension-installation) to play with the AgentQL query. [Learn more about the AgentQL query language](https://docs.agentql.com/agentql-query/query-intro)

javascript-sdk/examples/first-steps/first-steps.js

@@ -0,0 +1,75 @@
+const { chromium } = require('playwright');
+const { wrap, configure } = require('agentql');
+
+const URL = 'https://scrapeme.live/shop';
+
+// The AgentQL query to locate the search box element
+const SEARCH_BOX_QUERY = `
+{
+    search_product_box
+}
+`;
+
+// The AgentQL query of the data to be extracted
+const PRODUCT_DATA_QUERY = `
+{
+    price_currency
+    products[] {
+        name
+        price
+    }
+}
+`;
+
+// Other than the AgentQL query, you can also use natural language prompt to locate the element
+const NATURAL_LANGUAGE_PROMPT = 'Button to display Qwilfish page';
+
+async function main() {
+  // Configure the AgentQL API key
+  configure({ apiKey: 'YOUR_API_KEY' });
+
+  const browser = await chromium.launch({ headless: false });
+  const context = await browser.newContext();
+
+  // Wrap the page to get access to the AgentQL's querying API
+  const agentqlPage = wrap(await context.newPage());
+
+  await agentqlPage.goto(URL);
+
+  const productData = await _extractProductData(agentqlPage, 'fish');
+
+  console.log(productData);
+
+  await _addQwilfishToCart(agentqlPage);
+
+  await browser.close();
+}
+
+async function _extractProductData(page, searchKeyWord) {
+  // Find DOM element using AgentQL API's queryElements() method
+  const response = await page.queryElements(SEARCH_BOX_QUERY);
+
+  // Interact with the element using Playwright API
+  await response.search_product_box.type(searchKeyWord, { delay: 200 });
+  await page.keyboard.press('Enter');
+
+  // Extract data using AgentQL API's queryData() method
+  const data = await page.queryData(PRODUCT_DATA_QUERY);
+
+  return data;
+}
+
+async function _addQwilfishToCart(page) {
+  // Find DOM element using AgentQL API's getByPrompt() method
+  const qwilfishPageBtn = await page.getByPrompt(NATURAL_LANGUAGE_PROMPT);
+
+  // Interact with the element using Playwright API
+  if (qwilfishPageBtn) {
+    await qwilfishPageBtn.click();
+  }
+
+  // Wait for 10 seconds to see the browser action
+  await page.waitForTimeout(10000);
+}
+
+main();