v1

.github/workflows/nodejs.yml

@@ -0,0 +1,26 @@
+name: Node CI
+
+on: [push]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - name: yarn clean install and build
+      run: |
+        yarn clean
+        yarn install --force
+        yarn build
+      env:
+        CI: true

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+!dist/index.js
+.cache
+.vscode
+.env

.node-version

@@ -0,0 +1 @@
+12.13.0

.nvmrc

@@ -0,0 +1 @@
+12

.prettierrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2020 Looker Data Sciences, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,104 @@
+# Looker Extension Hello World (JavaScript)
+
+This repository demonstrates a bare bones Looker extension using javascript
+
+It uses [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/) for writing your extension, the [React Extension SDK](https://github.com/looker-open-source/extension-sdk-react) for interacting with Looker, and [Webpack](https://webpack.js.org/) for building your code.
+
+## Getting Started for Development
+
+1. Clone or download a copy of this template to your development machine
+
+2. Navigate (`cd`) to the template directory on your system
+
+3. Install the dependencies with [Yarn](https://yarnpkg.com/).
+
+   ```
+   yarn install
+   ```
+
+   > You may need to update your Node version or use a [Node version manager](https://github.com/nvm-sh/nvm) to change your Node version.
+
+4) Start the development server
+
+   ```
+   yarn start
+   ```
+
+   THe extension is now running and serving the JavaScript at http://localhost:8080/bundle.js.
+
+5) Log in to Looker and create a new project.
+
+   This is found under **Develop** => **Manage LookML Projects** => **New LookML Project**.
+
+   Select "Blank Project" as your "Starting Point". This will create a new project with no files.
+
+   1. The extension project has a `manifest.lkml` file.
+
+   Either drag & upload this file into your Looker project, or create a `manifest.lkml` with the same content. Change the `id`, `label`, or `url` as needed.
+
+   ```
+   project_name: "helloworld-js"
+   application: helloworld-js {
+    label: "Helloworld (JavaScript)"
+    url: "http://localhost:8080/bundle.js"
+    entitlements: {
+    core_api_methods: ["me"]
+   }
+   ```
+
+6. Create a `model` LookML file in your project. The name doesn't matter but the convention is to name it the same as the project.
+
+- Add a connection in this model.
+- [Configure the model you created](https://docs.looker.com/data-modeling/getting-started/create-projects#configuring_a_model) so that it has access to the selected connection.
+
+7. Connect the project to Git. This can be done in multiple ways:
+
+- Create a new repository on GitHub or a similar service, and follow the instructions to [connect your project to Git](https://docs.looker.com/data-modeling/getting-started/setting-up-git-connection)
+- A simpler but less powerful approach is to set up git with the "Bare" repository option which does not require connecting to an external Git Service.
+
+8. Commit the changes and deploy them to production through the Project UI.
+
+9. Reload the page and click the `Browse` dropdown menu. You will see the extension in the list.
+
+- The extension will load the JavaScript from the `url` provided in the `application` definition/
+- Reloading the extension page will bring in any new code changes from the extension template although some changes will hot reload.
+
+## Extension Entitlements
+
+Entitlements are defined in the project manifest file for the extension.
+
+Resources required by the extension (Looker API methods for example) must be defined in entitlements. This extension uses the `me` api method, as such it is defined in the entitlements.
+
+## Deployment
+
+The process above describes how to develope the extension. Once development has completed, the production version of the extension maybe deployed as follows:
+
+1. In the extension project directory build the extension by running `yarn build`.
+2. Drag and drop the generated `dist/bundle.js` file into the Looker project interface
+3. Modify the `manifest.lkml` to use `file` instead of `url`:
+
+   ```
+   project_name: "helloworld-js"
+   application: helloworld-js {
+    label: "Helloworld (JavaScript)"
+    file: "bundle.js"
+    entitlements: {
+    core_api_methods: ["me"]
+   }
+   ```
+
+## Notes
+
+- Webpack's module splitting is not currently supported.
+- The template uses Looker's component library and styled components. Neither of these libraries are required so you may remove and replace them with a component library of your own choice,
+
+## Related Projects
+
+- [Looker React extension template](https://github.com/looker-open-source/extension-template-react)
+- [Looker React/Redux extension template ](https://github.com/looker-open-source/extension-template-redux)
+- [Looker extension SDK](https://www.npmjs.com/package/@looker/extension-sdk)
+- [Looker extension SDK for React](https://www.npmjs.com/package/@looker/extension-sdk-react)
+- [Looker SDK](https://www.npmjs.com/package/@looker/sdk)
+- [Looker Embed SDK](https://github.com/looker-open-source/embed-sdk)
+- [Looker Components](https://components.looker.com/)
+- [Styled components](https://www.styled-components.com/docs)

babel.config.js

@@ -0,0 +1,59 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Looker Data Sciences, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+module.exports = (api) => {
+  api.cache(true)
+
+  return {
+    presets: [
+      [
+        '@babel/env',
+        {
+          targets: {
+            browsers: 'Last 2 Chrome versions, Firefox ESR',
+            node: '8.9',
+          },
+        },
+      ],
+      [
+        '@babel/preset-react',
+        {
+          development: process.env.BABEL_ENV !== 'build',
+        },
+      ],
+    ],
+    env: {
+      build: {
+        ignore: ['**/*.test.js', '**/*.test.jsx', '__snapshots__', '__tests__'],
+      },
+    },
+    ignore: ['node_modules'],
+    plugins: [
+      '@babel/plugin-proposal-class-properties',
+      '@babel/plugin-proposal-object-rest-spread',
+      '@babel/plugin-transform-runtime',
+      'babel-plugin-styled-components',
+    ],
+  }
+}

env_config.js

@@ -0,0 +1,33 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Looker Data Sciences, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+const dotenv = require('dotenv')
+
+module.exports = () => {
+  dotenv.config()
+  return Object.keys(process.env).reduce((accum, current) => {
+    accum[`process.env.${current}`] = JSON.stringify(process.env[current])
+    return accum
+  }, {})
+}

manifest.lkml

@@ -0,0 +1,9 @@
+project_name: "helloworld-js"
+
+application: helloworld-js {
+  label: "Helloworld (JavaScript)"
+  url: "http://localhost:8080/bundle.js"
+  entitlements: {
+    core_api_methods: ["me"]
+  }
+}

package.json

@@ -0,0 +1,71 @@
+{
+  "name": "extension-template-helloworld-hs",
+  "version": "0.8.1",
+  "description": "Looker Extension SDK Hello World JavaScript Demo",
+  "main": "dist/bundle.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "start": "webpack-dev-server --hot --disable-host-check --port 8080",
+    "build": "export BABEL_ENV=build && webpack --mode=production --config webpack.prod.config.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Looker",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "dependencies": {
+    "@hot-loader/react-dom": "^16.13.0",
+    "@looker/components": "0.9.6",
+    "@looker/embed-sdk": "^1.2.0",
+    "@looker/extension-sdk": "^0.11.0",
+    "@looker/extension-sdk-react": "^0.6.2",
+    "@looker/sdk": "0.3.0-beta.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-hot-loader": "^4.12.20",
+    "react-router-dom": "^5.1.2",
+    "styled-components": "^4.4.1",
+    "styled-system": "^5.1.2",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.10.3"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.7.4",
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/plugin-transform-runtime": "^7.7.4",
+    "@babel/preset-env": "^7.7.4",
+    "@babel/preset-react": "^7.7.4",
+    "@babel/preset-typescript": "^7.7.4",
+    "@babel/runtime": "^7.7.4",
+    "babel-loader": "^8.0.6",
+    "babel-preset-nano-react-app": "^0.1.0",
+    "css-loader": "^3.5.2",
+    "dotenv": "^8.2.0",
+    "json-server": "^0.16.1",
+    "style-loader": "^1.1.3"
+  },
+  "babel": {
+    "presets": [
+      "nano-react-app"
+    ],
+    "plugins": [
+      [
+        "@babel/plugin-proposal-class-properties",
+        {
+          "loose": true
+        }
+      ],
+      [
+        "@babel/plugin-transform-react-jsx",
+        {
+          "pragmaFrag": "React.Fragment"
+        }
+      ]
+    ]
+  }
+}

src/App.js

@@ -0,0 +1,36 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2020 Looker Data Sciences, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+import React from 'react'
+import { HelloWorld } from './HelloWorld'
+import { ExtensionProvider } from '@looker/extension-sdk-react'
+import { hot } from 'react-hot-loader/root'
+
+export const App = hot(() => {
+  return (
+    <ExtensionProvider>
+      <HelloWorld />
+    </ExtensionProvider>
+  )
+})