Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
create-framer-plugin
Advanced tools
create-framer-plugin - npm Package Compare versions
Comparing version 0.3.16 to 0.3.17
| import validateProjectName from "validate-npm-package-name" | ||
| export function validateNpmName(name) { | ||
| const nameValidation = validateProjectName(name) | ||
| if (nameValidation.validForNewPackages) { | ||
| return { valid: true } | ||
| } | ||
| const nameValidation = validateProjectName(name) | ||
| if (nameValidation.validForNewPackages) { | ||
| return { valid: true } | ||
| } | ||
| return { | ||
| valid: false, | ||
| problems: [ | ||
| ...(nameValidation.errors || []), | ||
| ...(nameValidation.warnings || []), | ||
| ], | ||
| } | ||
| return { | ||
| valid: false, | ||
| problems: [...(nameValidation.errors || []), ...(nameValidation.warnings || [])], | ||
| } | ||
| } |
@@ -7,38 +7,35 @@ // @ts-check | ||
| export async function writePackageJson(root, appName) { | ||
| const packageJson = { | ||
| name: appName, | ||
| private: true, | ||
| version: "0.0.0", | ||
| type: "module", | ||
| scripts: { | ||
| dev: "vite", | ||
| build: "vite build --base=${PREFIX_BASE_PATH:+/$npm_package_name}/", | ||
| lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", | ||
| preview: "vite preview", | ||
| }, | ||
| dependencies: { | ||
| "framer-plugin": "^0", | ||
| react: "^18", | ||
| "react-dom": "^18", | ||
| "vite-plugin-mkcert": "^1", | ||
| }, | ||
| devDependencies: { | ||
| "@types/react": "^18", | ||
| "@types/react-dom": "^18", | ||
| "@typescript-eslint/eslint-plugin": "^7", | ||
| "@typescript-eslint/parser": "^7", | ||
| "@vitejs/plugin-react-swc": "^3", | ||
| eslint: "^8", | ||
| "eslint-plugin-react-hooks": "^4", | ||
| "eslint-plugin-react-refresh": "^0", | ||
| typescript: "^5.3.3", | ||
| vite: "^5", | ||
| "vite-plugin-framer": "^0", | ||
| }, | ||
| } | ||
| const packageJson = { | ||
| name: appName, | ||
| private: true, | ||
| version: "0.0.0", | ||
| type: "module", | ||
| scripts: { | ||
| dev: "vite", | ||
| build: "vite build --base=${PREFIX_BASE_PATH:+/$npm_package_name}/", | ||
| lint: "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", | ||
| preview: "vite preview", | ||
| }, | ||
| dependencies: { | ||
| "framer-plugin": "^0", | ||
| react: "^18", | ||
| "react-dom": "^18", | ||
| "vite-plugin-mkcert": "^1", | ||
| }, | ||
| devDependencies: { | ||
| "@types/react": "^18", | ||
| "@types/react-dom": "^18", | ||
| "@typescript-eslint/eslint-plugin": "^7", | ||
| "@typescript-eslint/parser": "^7", | ||
| "@vitejs/plugin-react-swc": "^3", | ||
| eslint: "^8", | ||
| "eslint-plugin-react-hooks": "^4", | ||
| "eslint-plugin-react-refresh": "^0", | ||
| typescript: "^5.3.3", | ||
| vite: "^5", | ||
| "vite-plugin-framer": "^0", | ||
| }, | ||
| } | ||
| await fs.promises.writeFile( | ||
| path.join(root, "package.json"), | ||
| JSON.stringify(packageJson, null, 2) + os.EOL | ||
| ) | ||
| await fs.promises.writeFile(path.join(root, "package.json"), JSON.stringify(packageJson, null, 2) + os.EOL) | ||
| } |
300
index.js
@@ -20,2 +20,4 @@ #!/usr/bin/env node | ||
| import { formatTargetDir } from "./helpers/format-target-dir.js" | ||
| import { writeHtmlIndex } from "./helpers/write-html.js" | ||
| import { writeFramerJson } from "./helpers/write-framer-json.js" | ||
@@ -27,169 +29,149 @@ const cwd = process.cwd() | ||
| async function init() { | ||
| console.log() | ||
| console.log(chalk.blue("➤") + " Welcome to the Framer Plugins") | ||
| console.log() | ||
| console.log(chalk.blue("➤") + " Welcome to the Framer Plugins") | ||
| const argTargetDir = formatTargetDir(argv._[0]) | ||
| let projectPath = argTargetDir | ||
| const argTargetDir = formatTargetDir(argv._[0]) | ||
| let projectPath = argTargetDir | ||
| const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent) | ||
| const pkgManager = pkgInfo ? pkgInfo.name : "npm" | ||
| const pkgInfo = pkgFromUserAgent(process.env.npm_config_user_agent) | ||
| const pkgManager = pkgInfo ? pkgInfo.name : "npm" | ||
| if (!projectPath) { | ||
| // Run prompt based setup | ||
| const betaCheck = await prompts({ | ||
| onState: (state) => {}, | ||
| type: "toggle", | ||
| name: "value", | ||
| message: "Do you have Framer Beta access?", | ||
| initial: false, | ||
| active: "Yes", | ||
| inactive: "No", | ||
| }) | ||
| if (!projectPath) { | ||
| // Run prompt based setup | ||
| const betaCheck = await prompts({ | ||
| onState: state => {}, | ||
| type: "toggle", | ||
| name: "value", | ||
| message: "Do you have Framer Beta access?", | ||
| initial: false, | ||
| active: "Yes", | ||
| inactive: "No", | ||
| }) | ||
| if (!betaCheck.value) { | ||
| console.log("\nPlugins are currently beta-only.") | ||
| console.log( | ||
| "Sign up for updates: " + chalk.blue("https://www.framer.com/plugins/") | ||
| ) | ||
| process.exit(0) | ||
| } | ||
| if (!betaCheck.value) { | ||
| console.log("\nPlugins are currently beta-only.") | ||
| console.log("Sign up for updates: " + chalk.blue("https://www.framer.com/plugins/")) | ||
| process.exit(0) | ||
| } | ||
| const res = await prompts({ | ||
| onState: (state) => {}, | ||
| type: "text", | ||
| name: "path", | ||
| message: "What is your plugin named?", | ||
| validate: (name) => { | ||
| const validation = validateNpmName(path.basename(path.resolve(name))) | ||
| if (validation.valid) { | ||
| return true | ||
| const res = await prompts({ | ||
| onState: state => {}, | ||
| type: "text", | ||
| name: "path", | ||
| message: "What is your plugin named?", | ||
| validate: name => { | ||
| const validation = validateNpmName(path.basename(path.resolve(name))) | ||
| if (validation.valid) { | ||
| return true | ||
| } | ||
| return "Invalid project name: " + validation.problems?.[0] | ||
| }, | ||
| }) | ||
| if (typeof res.path === "string") { | ||
| projectPath = res.path.trim() | ||
| } | ||
| return "Invalid project name: " + validation.problems?.[0] | ||
| }, | ||
| }) | ||
| if (typeof res.path === "string") { | ||
| projectPath = res.path.trim() | ||
| if (!projectPath) { | ||
| console.log(`${chalk.green(checkmark)} Using default name “${chalk.bold("my-plugin")}”`) | ||
| projectPath = "my-plugin" | ||
| } | ||
| } | ||
| if (!projectPath) { | ||
| console.log( | ||
| `${chalk.green(checkmark)} Using default name “${chalk.bold( | ||
| "my-plugin" | ||
| )}”` | ||
| ) | ||
| projectPath = "my-plugin" | ||
| /** | ||
| * Verify the project dir is empty or doesn't exist | ||
| */ | ||
| const resolvedProjectPath = path.resolve(projectPath) | ||
| const appPath = resolvedProjectPath | ||
| const root = path.resolve(resolvedProjectPath) | ||
| const appName = path.basename(root) | ||
| const folderExists = fs.existsSync(root) | ||
| if (folderExists && !isFolderEmpty(root, appName)) { | ||
| console.error(`Folder ${projectPath} already exists and is not empty`) | ||
| process.exit(1) | ||
| } | ||
| } | ||
| /** | ||
| * Verify the project dir is empty or doesn't exist | ||
| */ | ||
| const resolvedProjectPath = path.resolve(projectPath) | ||
| const appPath = resolvedProjectPath | ||
| const root = path.resolve(resolvedProjectPath) | ||
| const appName = path.basename(root) | ||
| const folderExists = fs.existsSync(root) | ||
| if (!(await isWriteable(path.dirname(root)))) { | ||
| console.error("The application path is not writable, please check folder permissions and try again.") | ||
| console.error("It is likely you do not have write permissions for this folder.") | ||
| process.exit(1) | ||
| } | ||
| if (folderExists && !isFolderEmpty(root, appName)) { | ||
| console.error(`Folder ${projectPath} already exists and is not empty`) | ||
| process.exit(1) | ||
| } | ||
| fs.mkdirSync(root, { recursive: true }) | ||
| if (!(await isWriteable(path.dirname(root)))) { | ||
| console.error( | ||
| "The application path is not writable, please check folder permissions and try again." | ||
| ) | ||
| console.error( | ||
| "It is likely you do not have write permissions for this folder." | ||
| ) | ||
| process.exit(1) | ||
| } | ||
| const isOnline = await getOnline() | ||
| const originalDirectory = process.cwd() | ||
| fs.mkdirSync(root, { recursive: true }) | ||
| console.log() | ||
| console.log(`Creating a new Plugin in ${chalk.blue(root)}.`) | ||
| const isOnline = await getOnline() | ||
| const originalDirectory = process.cwd() | ||
| process.chdir(root) | ||
| console.log() | ||
| console.log(`Creating a new Plugin in ${chalk.blue(root)}.`) | ||
| // Create from Template | ||
| if (tryGitInit(root)) { | ||
| console.log("Initializing a git repository...") | ||
| } | ||
| process.chdir(root) | ||
| let cdpath | ||
| if (path.join(originalDirectory, appName) === appPath) { | ||
| cdpath = appName | ||
| } else { | ||
| cdpath = appPath | ||
| } | ||
| // Create from Template | ||
| if (tryGitInit(root)) { | ||
| console.log("Initializing a git repository...") | ||
| } | ||
| const template = "default" | ||
| let cdpath | ||
| if (path.join(originalDirectory, appName) === appPath) { | ||
| cdpath = appName | ||
| } else { | ||
| cdpath = appPath | ||
| } | ||
| const __filename = url.fileURLToPath(import.meta.url) | ||
| const templatePath = path.join(path.dirname(__filename), "templates", template) | ||
| const template = "default" | ||
| const copySource = ["**"] | ||
| const __filename = url.fileURLToPath(import.meta.url) | ||
| const templatePath = path.join( | ||
| path.dirname(__filename), | ||
| "templates", | ||
| template | ||
| ) | ||
| await copy(copySource, root, { | ||
| parents: true, | ||
| cwd: templatePath, | ||
| rename(name) { | ||
| switch (name) { | ||
| case "gitignore": | ||
| case "eslintrc.json": { | ||
| return `.${name}` | ||
| } | ||
| default: { | ||
| return name | ||
| } | ||
| } | ||
| }, | ||
| }) | ||
| const copySource = ["**"] | ||
| await writePackageJson(root, appName) | ||
| await writeHtmlIndex(root, appName) | ||
| await writeFramerJson(root, appName) | ||
| await copy(copySource, root, { | ||
| parents: true, | ||
| cwd: templatePath, | ||
| rename(name) { | ||
| switch (name) { | ||
| case "gitignore": | ||
| case "eslintrc.json": { | ||
| return `.${name}` | ||
| } | ||
| default: { | ||
| return name | ||
| } | ||
| } | ||
| }, | ||
| }) | ||
| if (pkgManager === "yarn") { | ||
| await fs.promises.writeFile(path.join(root, "yarn.lock"), "") | ||
| } | ||
| await writePackageJson(root, appName) | ||
| console.log("Installing dependencies...") | ||
| if (pkgManager === "yarn") { | ||
| await fs.promises.writeFile(path.join(root, "yarn.lock"), "") | ||
| } | ||
| await install(pkgManager, isOnline) | ||
| console.log("Installing dependencies...") | ||
| const boldAppName = chalk.bold(appName.includes(" ") ? `"${appName}"` : appName) | ||
| await install(pkgManager, isOnline) | ||
| console.log(`\n${chalk.blue(checkmark)} Created Framer Plugin “${boldAppName}”`) | ||
| console.log(`${chalk.blue("➜")} View the Docs: ${chalk.blueBright("https://developers.framer.wiki/")}`) | ||
| console.log() | ||
| const boldAppName = chalk.bold( | ||
| appName.includes(" ") ? `"${appName}"` : appName | ||
| ) | ||
| console.log(`Now run:`) | ||
| if (root !== cwd) { | ||
| console.log(` cd ${boldAppName}`) | ||
| } | ||
| console.log( | ||
| `\n${chalk.blue(checkmark)} Created Framer Plugin “${boldAppName}”` | ||
| ) | ||
| console.log( | ||
| `${chalk.blue("➜")} View the Docs: ${chalk.blueBright( | ||
| "https://developers.framer.wiki/" | ||
| )}` | ||
| ) | ||
| console.log() | ||
| console.log(`Now run:`) | ||
| if (root !== cwd) { | ||
| console.log(` cd ${boldAppName}`) | ||
| } | ||
| switch (pkgManager) { | ||
| case "yarn": | ||
| console.log(" yarn dev") | ||
| break | ||
| default: | ||
| console.log(` ${pkgManager} run dev`) | ||
| break | ||
| } | ||
| switch (pkgManager) { | ||
| case "yarn": | ||
| console.log(" yarn dev") | ||
| break | ||
| default: | ||
| console.log(` ${pkgManager} run dev`) | ||
| break | ||
| } | ||
| } | ||
@@ -199,5 +181,3 @@ | ||
| // eslint fails on older Node versions | ||
| const currentVersionParts = process.versions.node | ||
| .split(".") | ||
| .map((num) => parseInt(num, 10)) | ||
| const currentVersionParts = process.versions.node.split(".").map(num => parseInt(num, 10)) | ||
@@ -211,28 +191,20 @@ const [currentMajor, currentMinor] = currentVersionParts | ||
| if ( | ||
| requiredMajorVersion < minimumMajorVersion || | ||
| (requiredMajorVersion === minimumMajorVersion && | ||
| requiredMinorVersion < minimumMinorVersion) | ||
| requiredMajorVersion < minimumMajorVersion || | ||
| (requiredMajorVersion === minimumMajorVersion && requiredMinorVersion < minimumMinorVersion) | ||
| ) { | ||
| console.error( | ||
| `Node.js v${process.versions.node} is out of date and unsupported!` | ||
| ) | ||
| console.error( | ||
| `Please update to Node.js v${minimumMajorVersion}.${minimumMinorVersion} or higher.` | ||
| ) | ||
| process.exit(1) | ||
| console.error(`Node.js v${process.versions.node} is out of date and unsupported!`) | ||
| console.error(`Please update to Node.js v${minimumMajorVersion}.${minimumMinorVersion} or higher.`) | ||
| process.exit(1) | ||
| } | ||
| init().catch(async (reason) => { | ||
| console.log() | ||
| console.log("Aborted Install") | ||
| if (reason.command) { | ||
| console.log(` ${chalk.cyan(reason.command)} has failed.`) | ||
| } else { | ||
| console.log( | ||
| chalk.red("Unexpected error. Please report it as a bug:") + "\n", | ||
| reason | ||
| ) | ||
| } | ||
| console.log() | ||
| process.exit(1) | ||
| init().catch(async reason => { | ||
| console.log() | ||
| console.log("Aborted Install") | ||
| if (reason.command) { | ||
| console.log(` ${chalk.cyan(reason.command)} has failed.`) | ||
| } else { | ||
| console.log(chalk.red("Unexpected error. Please report it as a bug:") + "\n", reason) | ||
| } | ||
| console.log() | ||
| process.exit(1) | ||
| }) |
| { | ||
| "name": "create-framer-plugin", | ||
| "version": "0.3.16", | ||
| "version": "0.3.17", | ||
| "description": "Create Framer Plugins with one command", | ||
@@ -13,4 +13,5 @@ "main": "index.js", | ||
| "scripts": { | ||
| "start": "rm -rf my-plugin && node index.js", | ||
| "quick": "rm -rf my-plugin && node index.js my-plugin && cd my-plugin", | ||
| "start": "npm run clean && node index.js", | ||
| "quick": "npm run clean && node index.js my-plugin && cd my-plugin && npm run dev", | ||
| "clean": "rm -rf my-plugin", | ||
| "setup-dev": "node scripts/setup-dev.js", | ||
@@ -17,0 +18,0 @@ "dev": "yarn setup-dev && cd templates/default && yarn && yarn dev" |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by7.03%
33720
- Number of package files
- increased by7.41%
29
- Lines of code
- increased by1.75%
987
Worsened metrics
- Number of low supply chain risk alerts
- increased by18.18%
13
- Number of medium supply chain risk alerts
- increased by33.33%
4
No dependency changes