@sociallane/elements 1.0.7 → 1.0.8

package/docs/install-new-instance.md

@@ -81,6 +81,18 @@ npx @sociallane/elements --minimal path/to/wp-content/plugins/sociallane-element
 npx @sociallane/elements add hero-split faq   # run from WordPress root or plugin dir
 ```
 
+**Single widget (per-widget packages):**
+
+You can install one widget at a time via its own package. This installs the SocialLane Elements plugin if needed, then adds that widget and builds:
+
+```bash
+# From your WordPress root or wp-content/plugins
+npx @sociallane/widget-hero-overlay
+npx @sociallane/widget-faq-stacked
+```
+
+Each package is published as `@sociallane/widget-<slug>`. Use this when you only need one or two widgets and want a single command per widget.
+
 ---
 
 ## Post-install

package/docs/package-installation.md

@@ -121,6 +121,16 @@ The plugin is published as `@sociallane/elements`. To publish:
 
 `.npmignore` excludes `node_modules`, `.git`, and dev files so the tarball contains plugin source and `packages/`. Consumers run `npm install` in the plugin directory after copying to `wp-content/plugins` to install workspaces and trigger the build.
 
+## Per-widget npm packages
+
+Individual widgets are published as `@sociallane/widget-<slug>` (e.g. `@sociallane/widget-hero-overlay`). Run from your WordPress root or `wp-content/plugins`:
+
+```bash
+npx @sociallane/widget-hero-overlay
+```
+
+The installer installs the base plugin (`@sociallane/elements`) with `--minimal` if it is not present, then copies the widget into the plugin, runs `sync-widgets`, and `npm install`. Use these when you want a one-command install for a single widget. To add multiple widgets, `npx @sociallane/elements add slug1 slug2` is usually simpler.
+
 ## Adding a new widget package
 
 1. Add the widget directory under `packages/widgets/{slug}` with `{slug}.php`, `data/`, `templates/`, and `package.json` (see existing widgets).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sociallane/elements",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Elementor widgets and elements with Tailwind CSS for SocialLane. WordPress plugin.",
   "type": "module",
   "private": false,
@@ -30,6 +30,8 @@
     "postinstall": "node scripts/postinstall.js",
     "setup": "bash scripts/setup.sh",
     "sync-widgets": "node scripts/sync-widgets.js",
+    "build:widget-packages": "node scripts/build-widget-packages.js",
+    "publish:widgets": "node scripts/build-widget-packages.js && node scripts/publish-widget-packages.js",
     "reinstall": "rm -rf node_modules && npm install",
     "format": "prettier --write .",
     "format:check": "prettier --check ."

package/scripts/build-widget-packages.js

@@ -0,0 +1,92 @@
+#!/usr/bin/env node
+/**
+ * Build per-widget npm packages under packages/npm-widgets/<slug>.
+ * Each package contains: package.json, widget/ (copy of packages/widgets/<slug>), install.js, README.md.
+ * Run from plugin root: npm run build:widget-packages
+ */
+
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pluginRoot = path.resolve(__dirname, '..');
+const widgetsDir = path.join(pluginRoot, 'packages', 'widgets');
+const npmWidgetsDir = path.join(pluginRoot, 'packages', 'npm-widgets');
+
+function getWidgetSlugs() {
+  if (!existsSync(widgetsDir)) return [];
+  const entries = readdirSync(widgetsDir, { withFileTypes: true });
+  const slugs = [];
+  for (const ent of entries) {
+    if (!ent.isDirectory()) continue;
+    const slug = ent.name;
+    const phpFile = path.join(widgetsDir, slug, `${slug}.php`);
+    if (existsSync(phpFile)) slugs.push(slug);
+  }
+  return slugs.sort((a, b) => a.localeCompare(b));
+}
+
+function getRootVersion() {
+  const pkgPath = path.join(pluginRoot, 'package.json');
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+  return pkg.version || '1.0.0';
+}
+
+function buildPackage(slug, version) {
+  const pkgDir = path.join(npmWidgetsDir, slug);
+  mkdirSync(pkgDir, { recursive: true });
+
+  const widgetSrc = path.join(widgetsDir, slug);
+  const widgetDest = path.join(pkgDir, 'widget');
+  cpSync(widgetSrc, widgetDest, { recursive: true, force: true });
+
+  const packageName = `@sociallane/widget-${slug}`;
+  const binName = `widget-${slug}`;
+  const packageJson = {
+    name: packageName,
+    version,
+    description: `SocialLane Elements widget: ${slug}. Install into WordPress plugin via npx.`,
+    type: 'module',
+    private: false,
+    bin: { [binName]: 'install.js' },
+    keywords: ['wordpress', 'elementor', 'widget', 'sociallane', slug],
+    repository: {
+      type: 'git',
+      url: 'git+https://github.com/Mitch00llK/sociallane-elements.git',
+    },
+  };
+  writeFileSync(path.join(pkgDir, 'package.json'), JSON.stringify(packageJson, null, 2) + '\n');
+
+  const readme = `# @sociallane/widget-${slug}
+
+Elementor widget **${slug}** for SocialLane Elements.
+
+## Install
+
+From your WordPress root (or \`wp-content/plugins\`):
+
+\`\`\`bash
+npx @sociallane/widget-${slug}
+\`\`\`
+
+This installs the SocialLane Elements plugin if needed, then adds this widget and builds.
+`;
+  writeFileSync(path.join(pkgDir, 'README.md'), readme);
+
+  const installerSrc = path.join(pluginRoot, 'scripts', 'widget-installer.js');
+  cpSync(installerSrc, path.join(pkgDir, 'install.js'), { force: true });
+}
+
+function main() {
+  const slugs = getWidgetSlugs();
+  const version = getRootVersion();
+  if (!existsSync(npmWidgetsDir)) mkdirSync(npmWidgetsDir, { recursive: true });
+  for (const slug of slugs) {
+    buildPackage(slug, version);
+    console.log('Built:', `@sociallane/widget-${slug}`);
+  }
+  console.log('Done. Widget packages in packages/npm-widgets/');
+}
+
+main();

package/scripts/install.js

@@ -20,8 +20,25 @@ const widgetsSource = path.join(packageRoot, 'packages', 'widgets');
 
 function resolvePluginDir() {
   const cwd = process.cwd();
-  const hasPlugin = existsSync(path.join(cwd, 'sociallane-elements.php')) && existsSync(path.join(cwd, 'packages', 'widgets'));
-  return hasPlugin ? cwd : path.join(cwd, 'wp-content', 'plugins', 'sociallane-elements');
+  const normalized = path.normalize(cwd);
+  const pluginsSegment = 'wp-content' + path.sep + 'plugins';
+  if (existsSync(path.join(cwd, 'sociallane-elements.php')) && existsSync(path.join(cwd, 'packages', 'widgets'))) {
+    return cwd;
+  }
+  if (normalized.endsWith(pluginsSegment) || normalized.endsWith(pluginsSegment + path.sep)) {
+    return path.join(cwd, 'sociallane-elements');
+  }
+  if (normalized.includes(pluginsSegment + path.sep)) {
+    const idx = normalized.indexOf(pluginsSegment);
+    return path.join(normalized.slice(0, idx + pluginsSegment.length), 'sociallane-elements');
+  }
+  if (path.basename(cwd) === 'wp-content') {
+    return path.join(cwd, 'plugins', 'sociallane-elements');
+  }
+  if (existsSync(path.join(cwd, 'wp-content', 'plugins'))) {
+    return path.join(cwd, 'wp-content', 'plugins', 'sociallane-elements');
+  }
+  return path.join(cwd, 'wp-content', 'plugins', 'sociallane-elements');
 }
 
 function addWidgets(slugs) {
@@ -109,9 +126,18 @@ function copyPackage(toDir, filter) {
 function install(targetPath, minimal) {
   const cwd = process.cwd();
   const resolveDefaultTarget = () => {
+    const normalized = path.normalize(cwd);
+    const pluginsSegment = 'wp-content' + path.sep + 'plugins';
     if (existsSync(path.join(cwd, 'sociallane-elements.php'))) {
       return cwd;
     }
+    if (normalized.endsWith(pluginsSegment) || normalized.endsWith(pluginsSegment + path.sep)) {
+      return path.join(cwd, 'sociallane-elements');
+    }
+    if (normalized.includes(pluginsSegment + path.sep)) {
+      const idx = normalized.indexOf(pluginsSegment);
+      return path.join(normalized.slice(0, idx + pluginsSegment.length), 'sociallane-elements');
+    }
     if (path.basename(cwd) === 'plugins' && path.basename(path.dirname(cwd)) === 'wp-content') {
       return path.join(cwd, 'sociallane-elements');
     }

package/scripts/publish-widget-packages.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+/**
+ * Publish all per-widget packages under packages/npm-widgets/.
+ * Run from plugin root: npm run publish:widgets
+ * (build:widget-packages is run first by the npm script.)
+ */
+
+import { readdirSync, existsSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { spawnSync } from 'child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const pluginRoot = path.resolve(__dirname, '..');
+const npmWidgetsDir = path.join(pluginRoot, 'packages', 'npm-widgets');
+
+if (!existsSync(npmWidgetsDir)) {
+  console.error('packages/npm-widgets/ not found. Run npm run build:widget-packages first.');
+  process.exit(1);
+}
+
+const dirs = readdirSync(npmWidgetsDir, { withFileTypes: true })
+  .filter((d) => d.isDirectory())
+  .map((d) => d.name)
+  .sort((a, b) => a.localeCompare(b));
+
+if (dirs.length === 0) {
+  console.error('No widget packages in packages/npm-widgets/');
+  process.exit(1);
+}
+
+const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+(async () => {
+  for (let i = 0; i < dirs.length; i++) {
+    const slug = dirs[i];
+    const pkgDir = path.join(npmWidgetsDir, slug);
+    if (!existsSync(path.join(pkgDir, 'package.json'))) continue;
+    console.log('Publishing @sociallane/widget-' + slug + '...');
+    const r = spawnSync(npmCmd, ['publish', '--access', 'public'], {
+      cwd: pkgDir,
+      stdio: 'inherit',
+      shell: true,
+    });
+    if (r.status !== 0) {
+      process.exit(r.status ?? 1);
+    }
+    if (i < dirs.length - 1) {
+      await new Promise((r) => setTimeout(r, 2000));
+    }
+  }
+  console.log('Done. Published', dirs.length, 'widget packages.');
+})();

package/scripts/widget-installer.js

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+/**
+ * Per-widget installer: run from a @sociallane/widget-<slug> package (npx).
+ * Ensures SocialLane Elements plugin is installed, then copies this package's widget/
+ * into the plugin's packages/widgets/<slug>, runs sync-widgets and npm install.
+ */
+
+import { cpSync, existsSync, mkdirSync, readFileSync } from 'fs';
+import { spawnSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageRoot = path.resolve(__dirname);
+const widgetDir = path.join(packageRoot, 'widget');
+
+function getSlugFromPackage() {
+  const pkgPath = path.join(packageRoot, 'package.json');
+  if (!existsSync(pkgPath)) {
+    console.error('package.json not found in', packageRoot);
+    process.exit(1);
+  }
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+  const name = pkg.name || '';
+  const match = name.match(/^@sociallane\/widget-(.+)$/);
+  if (!match) {
+    console.error('Package name must be @sociallane/widget-<slug>. Got:', name);
+    process.exit(1);
+  }
+  return match[1];
+}
+
+function resolvePluginDir() {
+  const cwd = process.cwd();
+  const normalized = path.normalize(cwd);
+  const pluginsSegment = 'wp-content' + path.sep + 'plugins';
+  if (existsSync(path.join(cwd, 'sociallane-elements.php')) && existsSync(path.join(cwd, 'packages', 'widgets'))) {
+    return cwd;
+  }
+  if (normalized.endsWith(pluginsSegment) || normalized.endsWith(pluginsSegment + path.sep)) {
+    return path.join(cwd, 'sociallane-elements');
+  }
+  if (normalized.includes(pluginsSegment + path.sep)) {
+    const idx = normalized.indexOf(pluginsSegment);
+    return path.join(normalized.slice(0, idx + pluginsSegment.length), 'sociallane-elements');
+  }
+  if (path.basename(cwd) === 'plugins' && path.basename(path.dirname(cwd)) === 'wp-content') {
+    return path.join(cwd, 'sociallane-elements');
+  }
+  if (path.basename(cwd) === 'wp-content') {
+    return path.join(cwd, 'plugins', 'sociallane-elements');
+  }
+  if (existsSync(path.join(cwd, 'wp-content', 'plugins'))) {
+    return path.join(cwd, 'wp-content', 'plugins', 'sociallane-elements');
+  }
+  return path.join(cwd, 'wp-content', 'plugins', 'sociallane-elements');
+}
+
+function main() {
+  const slug = getSlugFromPackage();
+  if (!existsSync(widgetDir)) {
+    console.error('Widget folder not found:', widgetDir);
+    process.exit(1);
+  }
+  if (!existsSync(path.join(widgetDir, `${slug}.php`))) {
+    console.error('Invalid widget: missing', path.join(widgetDir, `${slug}.php`));
+    process.exit(1);
+  }
+
+  const pluginDir = resolvePluginDir();
+  const widgetsDest = path.join(pluginDir, 'packages', 'widgets');
+  const pluginExists = existsSync(path.join(pluginDir, 'sociallane-elements.php'));
+
+  if (!pluginExists) {
+    console.log('SocialLane Elements not found. Installing base plugin...');
+    const r = spawnSync('npx', ['--yes', '@sociallane/elements', '--minimal'], {
+      cwd: path.dirname(pluginDir),
+      stdio: 'inherit',
+      shell: true,
+    });
+    if (r.status !== 0) {
+      process.exit(r.status ?? 1);
+    }
+  }
+
+  if (!existsSync(widgetsDest)) {
+    mkdirSync(widgetsDest, { recursive: true });
+  }
+
+  const dest = path.join(widgetsDest, slug);
+  cpSync(widgetDir, dest, { recursive: true, force: true });
+  console.log('Added widget:', slug);
+
+  console.log('Updating widgets.json and building...');
+  const syncResult = spawnSync('node', [path.join(pluginDir, 'scripts', 'sync-widgets.js')], {
+    cwd: pluginDir,
+    stdio: 'inherit',
+  });
+  if (syncResult.status !== 0) {
+    process.exit(syncResult.status ?? 1);
+  }
+
+  const npmCmd = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+  const installResult = spawnSync(npmCmd, ['install'], {
+    cwd: pluginDir,
+    stdio: 'inherit',
+    shell: true,
+  });
+  if (installResult.status !== 0) {
+    if (installResult.error) {
+      console.error('Failed to run npm:', installResult.error.message);
+    }
+    process.exit(installResult.status ?? 1);
+  }
+
+  console.log('');
+  console.log('Done. Widget', slug, 'installed. Activate the plugin in WordPress → Plugins if needed.');
+}
+
+try {
+  main();
+} catch (err) {
+  console.error('Widget installer failed:', err.message);
+  if (process.env.DEBUG) {
+    console.error(err.stack);
+  }
+  process.exit(1);
+}