@kvaser/canking-api 7.1.0-beta.231

package/scripts/createCanKingExtension.js

@@ -0,0 +1,403 @@
+'use strict';
+
+const https = require('https');
+const chalk = require('chalk');
+const commander = require('@commander-js/extra-typings');
+const execSync = require('child_process').execSync;
+const fs = require('fs-extra');
+const os = require('os');
+const path = require('path');
+const semver = require('semver');
+const spawn = require('cross-spawn');
+const validateProjectName = require('validate-npm-package-name');
+
+const packageJson = require('../package.json');
+
+const kvaserRegistry = 'http://artifact.kvaser.se/artifactory/api/npm/libs-npm';
+
+function init() {
+  let projectName;
+
+  const program = new commander.Command(`npx ${packageJson.name}`)
+    .description('Script for creating a new CanKing extension project')
+    .version(packageJson.version)
+    .argument(
+      '<project-name>',
+      'The project name. A new project folder with this name will be created in the current folder.',
+    )
+    .action(name => (projectName = name))
+    .usage(`${chalk.green('<project-name>')} [options]`)
+    .option('--view-name <string>', 'workspace view name', '')
+    .option('--desc <string>', 'project description', 'A CanKing GUI extension.')
+    .option('--author <string>', 'project author', '')
+    .option('--verbose', 'print additional logs')
+    .option('--force', 'use installed script even if a newer version exists')
+    .option('--show-doc', 'opens the documentation')
+    .allowUnknownOption()
+    .showHelpAfterError()
+    .parse(process.argv);
+
+  const options = program.opts();
+
+  if (options.viewName === '') {
+    options.viewName = projectName
+      .split('-')
+      .map(n => n.charAt(0).toUpperCase() + n.slice(1))
+      .join('');
+  }
+
+  // Set correct register for @kvaser scope
+  try {
+    execSync(`npm config set @kvaser:registry ${kvaserRegistry}`);
+  } catch {}
+
+  // We first check the registry directly via the API, and if that fails, we try
+  // the slower `npm view [package] version` command.
+  //
+  // This is important for users in environments where direct access to npm is
+  // blocked by a firewall, and packages are provided exclusively via a private
+  // registry.
+  checkForLatestVersion()
+    .catch(() => {
+      try {
+        return execSync('npm view @kvaser/create-canking-extension version').toString().trim();
+      } catch (e) {
+        return null;
+      }
+    })
+    .then(latest => {
+      if (!options.force && latest && semver.lt(packageJson.version, latest)) {
+        console.log();
+        console.error(
+          chalk.yellow(
+            `You are running \`create-canking-extension\` ${packageJson.version}, which is behind the latest release (${latest}).\n\n` +
+              'We recommend always using the latest version of create-canking-extension if possible.\n\n' +
+              'Use --force option to override if you want to use the old version.',
+          ),
+        );
+        console.log();
+      } else {
+        try {
+          createExtension(projectName, options.viewName, options.desc, options.author, options.verbose);
+        } catch (e) {
+          console.error(chalk.red(e));
+        }
+      }
+    });
+}
+
+function createExtension(name, viewName, description, author, verbose) {
+  const root = path.resolve(name);
+  const extensionName = path.basename(root);
+
+  checkExtensionName(extensionName);
+  fs.ensureDirSync(name);
+  if (!isSafeToCreateProjectIn(root, name)) {
+    process.exit(1);
+  }
+  console.log();
+
+  console.log(`Creating a new CanKing extension in ${chalk.green(root)}.`);
+  console.log();
+
+  const packageJson = {
+    name: extensionName,
+    version: '1.0.0',
+    description: description,
+    author: author,
+    canking: {
+      workspaceViewName: viewName,
+      types: ['WorkspaceView'],
+    },
+    private: true,
+    license: 'UNLICENSED',
+    type: 'module',
+    files: ['dist'],
+    scripts: {
+      start: 'npm-run-all --parallel dev canking',
+      startpreview: 'npm-run-all --parallel preview canking',
+      dev: 'vite --port 4000',
+      canking:
+        'cross-env "C:/Program Files/Kvaser CanKing/Kvaser CanKing.exe" --ck-debug-pkg "./package.json" --ck-debug-port 4000',
+      build: 'tsc -b && vite build',
+      lint: 'eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0',
+      prettier: 'prettier --config .prettierrc **/*.ts* --write',
+      preview: 'vite preview --port 4000',
+      prepack: 'npm run build',
+      prebuild: 'rimraf dist',
+    },
+  };
+  fs.writeFileSync(path.join(root, 'package.json'), JSON.stringify(packageJson, null, 2) + os.EOL);
+
+  process.chdir(root);
+
+  // Copy templates
+  fs.copySync(path.join(__dirname, 'template', '_.vscode', '_launch.json'), path.join(root, '.vscode', 'launch.json'));
+  fs.copySync(
+    path.join(__dirname, 'template', 'src', 'WorkspaceView', 'index.tsx'),
+    path.join(root, 'src', 'WorkspaceView', 'index.tsx'),
+  );
+  fs.copySync(path.join(__dirname, 'template', 'src', 'App.tsx'), path.join(root, 'src', 'App.tsx'));
+  fs.copySync(path.join(__dirname, 'template', 'src', 'main.css'), path.join(root, 'src', 'main.css'));
+  fs.copySync(path.join(__dirname, 'template', 'src', 'main.tsx'), path.join(root, 'src', 'main.tsx'));
+  fs.copySync(path.join(__dirname, 'template', 'src', 'vite-env.d.ts'), path.join(root, 'src', 'vite-env.d.ts'));
+  fs.copySync(path.join(__dirname, 'template', '_.eslintrc.cjs'), path.join(root, '.eslintrc.cjs'));
+  fs.copySync(path.join(__dirname, 'template', '_.gitignore'), path.join(root, '.gitignore'));
+  fs.copySync(path.join(__dirname, 'template', '_.npmrc'), path.join(root, '.npmrc'));
+  fs.copySync(path.join(__dirname, 'template', '_.prettierrc'), path.join(root, '.prettierrc'));
+  fs.copySync(path.join(__dirname, 'template', '_index.html'), path.join(root, 'index.html'));
+  fs.copySync(path.join(__dirname, 'template', '_tsconfig.app.json'), path.join(root, 'tsconfig.app.json'));
+  fs.copySync(path.join(__dirname, 'template', '_tsconfig.json'), path.join(root, 'tsconfig.json'));
+  fs.copySync(path.join(__dirname, 'template', '_tsconfig.node.json'), path.join(root, 'tsconfig.node.json'));
+  fs.copySync(path.join(__dirname, 'template', '_vite.config.ts'), path.join(root, 'vite.config.ts'));
+
+  installDependencies(verbose)
+    .then(() => {
+      console.log();
+      console.log(`A project for extension ${extensionName} has been created successfully.`);
+      console.log();
+    })
+    .catch(reason => {
+      console.log();
+      console.log('Aborting installation.');
+      console.log(chalk.red('Unexpected error. Please report it as a bug:'));
+      console.log(reason);
+      console.log();
+
+      // On 'exit' we will delete these files from target directory.
+      const knownGeneratedFiles = [
+        'package.json',
+        'node_modules',
+        '.vscode',
+        'src',
+        '.eslintrc.cjs',
+        '.gitignore',
+        '.npmrc',
+        '.prettierrc',
+        'index.html',
+        'tsconfig.app.json',
+        'tsconfig.json',
+        'tsconfig.node.json',
+        'vite.config.ts',
+      ];
+      const currentFiles = fs.readdirSync(path.join(root));
+      currentFiles.forEach(file => {
+        knownGeneratedFiles.forEach(fileToMatch => {
+          // This removes all knownGeneratedFiles.
+          if (file === fileToMatch) {
+            console.log(`Deleting generated file... ${chalk.cyan(file)}`);
+            fs.removeSync(path.join(root, file));
+          }
+        });
+      });
+      const remainingFiles = fs.readdirSync(path.join(root));
+      if (!remainingFiles.length) {
+        // Delete target folder if empty
+        console.log(`Deleting ${chalk.cyan(`${extensionName}/`)} from ${chalk.cyan(path.resolve(root, '..'))}`);
+        process.chdir(path.resolve(root, '..'));
+        fs.removeSync(path.join(root));
+      }
+      console.log('Done.');
+      process.exit(1);
+    });
+}
+
+function installDev(dependencies, verbose) {
+  return new Promise((resolve, reject) => {
+    const command = 'npm';
+    const args = ['install', '--no-audit', '--no-fund', '--save-dev'].concat(dependencies);
+
+    if (verbose) {
+      args.push('--verbose');
+    }
+
+    const child = spawn(command, args, { stdio: 'inherit' });
+    child.on('close', code => {
+      if (code !== 0) {
+        reject({
+          command: `${command} ${args.join(' ')}`,
+        });
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+function install(dependencies, verbose) {
+  return new Promise((resolve, reject) => {
+    const command = 'npm';
+    const args = ['install', '--no-audit', '--no-fund', '--save'].concat(dependencies);
+
+    if (verbose) {
+      args.push('--verbose');
+    }
+
+    const child = spawn(command, args, { stdio: 'inherit' });
+    child.on('close', code => {
+      if (code !== 0) {
+        reject({
+          command: `${command} ${args.join(' ')}`,
+        });
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+function installDependencies(verbose) {
+  return Promise.resolve(
+    install(
+      [
+        '@emotion/react@^11.13.3',
+        '@emotion/styled@^11.13.0',
+        '@fontsource/roboto@^5.1.0',
+        '@kvaser/canking-api',
+        '@mui/material@^6.1.3',
+        'fast-deep-equal@^3.1.3',
+        'google-protobuf@^3.21.4',
+        'long@^5.2.3',
+        'react@^18.3.1',
+        'react-dom@^18.3.1',
+        'react-router-dom',
+        'uuid@^10.0.0',
+      ],
+      verbose,
+    ),
+  ).then(() =>
+    installDev(
+      [
+        '@types/google-protobuf@^3.15.12',
+        '@types/node@^22.7.5',
+        '@types/react@^18.3.11',
+        '@types/react-dom@^18.3.1',
+        '@types/react-router-dom',
+        '@types/uuid@^10.0.0',
+        '@typescript-eslint/eslint-plugin@^8.9.0',
+        '@typescript-eslint/parser@^8.9.0',
+        '@vitejs/plugin-react-swc@^3.7.1',
+        'cross-env@^7.0.3',
+        'eslint@^9.12.0',
+        'eslint-config-prettier@^9.1.0',
+        'eslint-plugin-prettier@^5.2.1',
+        'eslint-plugin-react@^7.37.1',
+        'eslint-plugin-react-hooks@^5.0.0',
+        'npm-run-all',
+        'prettier@^3.3.3',
+        'rimraf@^6.0.1',
+        'typescript@^5.6.3',
+        'vite@^5.4.9',
+      ],
+      verbose,
+    ),
+  );
+}
+
+function checkExtensionName(extensionName) {
+  const validationResult = validateProjectName(extensionName);
+  if (!validationResult.validForNewPackages) {
+    console.error(
+      chalk.red(
+        `Cannot create a project named ${chalk.green(`"${extensionName}"`)} because of npm naming restrictions:\n`,
+      ),
+    );
+    [...(validationResult.errors || []), ...(validationResult.warnings || [])].forEach(error => {
+      console.error(chalk.red(`  * ${error}`));
+    });
+    console.error(chalk.red('\nPlease choose a different project name.'));
+    process.exit(1);
+  }
+}
+
+/**
+ * Checks if the destination folder is okay to use.
+ * @param root The project root folder
+ * @param name The project name
+ * @returns true if not conflicts exists
+ */
+function isSafeToCreateProjectIn(root, name) {
+  const validFiles = [
+    '.DS_Store',
+    '.git',
+    '.gitattributes',
+    '.gitignore',
+    '.gitlab-ci.yml',
+    '.hg',
+    '.hgcheck',
+    '.hgignore',
+    '.idea',
+    '.npmignore',
+    '.travis.yml',
+    'docs',
+    'LICENSE',
+    'README.md',
+    'mkdocs.yml',
+    'Thumbs.db',
+  ];
+  // These files should be allowed to remain on a failed install, but then
+  // silently removed during the next create.
+  const errorLogFilePatterns = ['npm-debug.log'];
+  const isErrorLog = file => {
+    return errorLogFilePatterns.some(pattern => file.startsWith(pattern));
+  };
+
+  const conflicts = fs
+    .readdirSync(root)
+    .filter(file => !validFiles.includes(file))
+    // Don't treat log files from previous installation as conflicts
+    .filter(file => !isErrorLog(file));
+
+  if (conflicts.length > 0) {
+    console.log(`The directory ${chalk.green(name)} contains files that could conflict:`);
+    console.log();
+    for (const file of conflicts) {
+      try {
+        const stats = fs.lstatSync(path.join(root, file));
+        if (stats.isDirectory()) {
+          console.log(`  ${chalk.blue(`${file}/`)}`);
+        } else {
+          console.log(`  ${file}`);
+        }
+      } catch (e) {
+        console.log(`  ${file}`);
+      }
+    }
+    console.log();
+    console.log('Either try using a new directory name, or remove the files listed above.');
+
+    return false;
+  }
+
+  // Remove any log files from a previous installation.
+  fs.readdirSync(root).forEach(file => {
+    if (isErrorLog(file)) {
+      fs.removeSync(path.join(root, file));
+    }
+  });
+  return true;
+}
+
+function checkForLatestVersion() {
+  return new Promise((resolve, reject) => {
+    https
+      .get(`${kvaserRegistry}/-/package/%40kvaser/create-canking-extension/dist-tags`, res => {
+        if (res.statusCode === 200) {
+          let body = '';
+          res.on('data', data => (body += data));
+          res.on('end', () => {
+            resolve(JSON.parse(body).latest);
+          });
+        } else {
+          reject();
+        }
+      })
+      .on('error', () => {
+        reject();
+      });
+  });
+}
+
+module.exports = {
+  init,
+};

package/scripts/index.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const lowestMajorNodeVersion = 18;
+const currentNodeVersion = process.versions.node;
+const semver = currentNodeVersion.split('.');
+const major = semver[0];
+
+const chalk = require('chalk');
+
+if (major < lowestMajorNodeVersion) {
+  console.error(
+    chalk.red(
+      'You are running Node ' +
+        currentNodeVersion +
+        '.\n' +
+        `Create CanKing Extension requires Node ${lowestMajorNodeVersion} or higher. \n` +
+        'Please update your version of Node.',
+    ),
+  );
+  process.exit(1);
+}
+
+if (process.argv.length === 3 && process.argv[2] === '--show-doc') {
+  try {
+    (async () => {
+      const open = (await import('open')).default;
+      const path = require('path');
+      const filePath = path.join(__dirname, '../doc/index.html');
+      open(filePath);
+    })();
+  } catch (error) {
+    console.error(chalk.red(error));
+  }
+} else {
+  const { init } = require('./createCanKingExtension');
+  init();
+}

package/scripts/template/_.eslintrc.cjs

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', 'plugin:react/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': 'off',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-import-module-exports': 'off',
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
+    'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+    quotes: [2, 'single', { avoidEscape: true }],
+    'react/prop-types': 'off',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+};

package/scripts/template/_.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/scripts/template/_.npmrc

@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.com
+@kvaser:registry=http://artifact.kvaser.se/artifactory/api/npm/libs-npm

package/scripts/template/_.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "arrowParens": "avoid"
+}

package/scripts/template/_.vscode/_launch.json

@@ -0,0 +1,28 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Dev Server",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"]
+    },
+    {
+      "name": "CanKing",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "canking"]
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug",
+      "configurations": ["Dev Server", "CanKing"]
+    }
+  ]
+}

package/scripts/template/_index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CanKing Extension Template</title>
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

package/scripts/template/_tsconfig.app.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/scripts/template/_tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

package/scripts/template/_tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/scripts/template/_vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package/scripts/template/src/App.tsx

@@ -0,0 +1,12 @@
+import { CanKingDataProvider } from '@kvaser/canking-api/controls';
+import WorkspaceView from './WorkspaceView';
+
+function App() {
+  return (
+    <CanKingDataProvider>
+      <WorkspaceView />
+    </CanKingDataProvider>
+  );
+}
+
+export default App;

package/scripts/template/src/WorkspaceView/index.tsx

@@ -0,0 +1,47 @@
+import { useSearchParams } from 'react-router-dom';
+import { useProjectData } from '@kvaser/canking-api/hooks';
+import { CanChannelSelectControl } from '@kvaser/canking-api/controls';
+import { Box } from '@mui/material';
+
+// If any data should be stored in the project file then add it to this interface
+interface IProjectViewData {
+  // This is an example showing how to store the selected channel id to the project file
+  channelId: string;
+}
+
+// Define any default values for the project data that will be used when the component is created
+const defaultProjectViewData: IProjectViewData = {
+  channelId: '',
+};
+
+// This component is the component that will be loaded into the Workspace view
+function WorkspaceView() {
+  // Get this view's unique id from search params
+  const [searchParams] = useSearchParams();
+  const idString = searchParams.get('id');
+  const id = idString !== null ? Number.parseInt(idString, 10) : -1;
+
+  // Use the useProjectData hook to serialize/deserialize your view data to the project
+  const { projectData, setProjectData } = useProjectData<IProjectViewData>(id, defaultProjectViewData);
+
+  // A callback that will get the new selected channel id and save it to the project data
+  const onChannelIdentifierChange = (channelId: string) => {
+    const data = { ...projectData };
+    data.channelId = channelId;
+    setProjectData(data);
+  };
+
+  return (
+    <Box aria-label="can-channel-select-extension-view">
+      <div>Add your elements here!</div>
+      <div>This is an example how to use the CanChannelSelectControl:</div>
+      <CanChannelSelectControl
+        channelIdentifier={projectData.channelId}
+        onChannelIdentifierChange={onChannelIdentifierChange}
+        hideSectionControl
+      />
+    </Box>
+  );
+}
+
+export default WorkspaceView;