feat: basic dash setup

.gitignore

@@ -24,6 +24,7 @@ docs
 /NAMESPACE
 /inst/htmlwidgets/upsetjs.js
 /inst/htmlwidgets/upsetjs.js.LICENSE.txt
+/inst/dash/
 doc
 Meta
 /vignettes/*.R

R/dash.R

@@ -0,0 +1,47 @@
+#
+# @upsetjs/r
+# https://github.com/upsetjs/upsetjs_r
+#
+# Copyright (c) 2021 Samuel Gratzl <sam@sgratzl.com>
+#
+
+#'
+#' create a new upsetjs dash adapter
+#' @export
+upsetjsDash <- function(children = NULL, id = NULL, width = NULL, height = NULL) {
+  props <- list(children = children, id = id, height = height, width = width)
+  if (length(props) > 0) {
+    props <- props[!vapply(props, is.null, logical(1))]
+  }
+  component <- list(
+    props = props,
+    type = "DashUpSetJS",
+    namespace = "upsetjs",
+    propNames = c("children", "id", "height", "width"),
+    package = "upsetjs"
+  )
+
+  structure(component, class = c("dash_component", "list"))
+}
+
+
+.dash_upsetjs_js_metadata <- function() {
+  deps_metadata <- list(
+    `upsetjs` = structure(list(
+      name = "upsetjs",
+      version = "1.9.0",
+      src = list(
+        href = NULL,
+        file = "dash"
+      ),
+      meta = NULL,
+      script = "upsetjs.js",
+      stylesheet = NULL,
+      head = NULL,
+      attachment = NULL,
+      package = "upsetjs",
+      all_files = FALSE
+    ), class = "html_dependency")
+  )
+  return(deps_metadata)
+}

js/dash.tsx

@@ -0,0 +1,16 @@
+/**
+ * @upsetjs/r
+ * https://github.com/upsetjs/upsetjs_r
+ *
+ * Copyright (c) 2021 Samuel Gratzl <sam@sgratzl.com>
+ */
+import React from 'react';
+
+import { UpSetJS } from '@upsetjs/react';
+import { RBindingUpSetProps } from './model';
+
+declare type DashUpSetJSProps = RBindingUpSetProps & {};
+
+export function DashUpSetJS(_props: DashUpSetJSProps) {
+  return <UpSetJS width={100} height={100} sets={[]} />;
+}

package.json

@@ -59,6 +59,7 @@
     "html-webpack-plugin": "^5.3.2",
     "pnp-webpack-plugin": "^1.7.0",
     "prettier": "^2.4.1",
+    "react": "^17.0.2",
     "release-it": "^14.11.5",
     "rimraf": "^3.0.2",
     "ts-loader": "^9.2.5",
@@ -68,10 +69,15 @@
     "webpack-cli": "^4.8.0"
   },
   "dependencies": {
+    "@types/react": "^16.8",
     "@upsetjs/bundle": "~1.9.1",
+    "@upsetjs/react": "^1.9.1",
     "@upsetjs/venn.js": "^1.4.1",
     "core-js": "^2",
     "element-closest-polyfill": "^1.0.4",
     "regenerator-runtime": "^0.13.9"
+  },
+  "peerDependencies": {
+    "react": "^16.8"
   }
 }

tsconfig.json

@@ -28,6 +28,7 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "moduleResolution": "node",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "jsx": "react"
   }
 }

webpack.config.js

@@ -19,38 +19,83 @@ const babel = {
   },
 };
 
-module.exports = {
-  entry: {
-    app: './js/htmlwidget.ts',
-  },
-  output: {
-    filename: 'upsetjs.js',
-    path: path.resolve(__dirname, 'inst', 'htmlwidgets'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: [
-          babel,
-          {
-            loader: require.resolve('ts-loader'),
-          },
-        ],
-      },
-      {
-        test: /\.js?$/,
-        use: [babel],
-      },
-    ],
-  },
-  plugins: [],
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
-    alias: { '@': path.resolve(__dirname) },
-    plugins: [PnpWebpackPlugin],
+module.exports = [
+  {
+    entry: {
+      app: './js/htmlwidget.ts',
+    },
+    output: {
+      filename: 'upsetjs.js',
+      path: path.resolve(__dirname, 'inst', 'htmlwidgets'),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: [
+            babel,
+            {
+              loader: require.resolve('ts-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.js?$/,
+          use: [babel],
+        },
+      ],
+    },
+    plugins: [],
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+      alias: { '@': path.resolve(__dirname) },
+      plugins: [PnpWebpackPlugin],
+    },
+    resolveLoader: {
+      plugins: [PnpWebpackPlugin.moduleLoader(module)],
+    },
   },
-  resolveLoader: {
-    plugins: [PnpWebpackPlugin.moduleLoader(module)],
+  {
+    entry: {
+      app: './js/dash.tsx',
+    },
+    output: {
+      filename: 'upsetjs.js',
+      path: path.resolve(__dirname, 'inst', 'dash'),
+      library: 'upsetjs',
+      libraryTarget: 'window',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: [
+            babel,
+            {
+              loader: require.resolve('ts-loader'),
+            },
+          ],
+        },
+        {
+          test: /\.js?$/,
+          use: [babel],
+        },
+      ],
+    },
+    plugins: [],
+    externals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+      'plotly.js': 'Plotly',
+      'prop-types': 'PropTypes',
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js'],
+      alias: { '@': path.resolve(__dirname) },
+      plugins: [PnpWebpackPlugin],
+    },
+    resolveLoader: {
+      plugins: [PnpWebpackPlugin.moduleLoader(module)],
+    },
   },
-};
+];