Berryjam CLI Docs

Appearance

On this page

Introduction ​

What is Berryjam? ​

Berryjam is a Vue.js component analytics tool to scan your source code for components to monitor their usages. Component visibility allows for effective team communication while actionable insights provide opportunities to optimize your codebase.

Berryjam is equipped with CLI and a Web Analytics Dashboard.

Berryjam scans for components in your source code to output a JSON file. Here is a sample JSON.

json
// Sample JSON Output
[
 {
	"name": "Overlay",
	"type": "internal",
	"usage": 1,
	"deepestNested": 3,
	"source": {
	 "path": "/koel/resources/assets/js/components/ui/Overlay.vue",
	 "property": {
		"dataLastModified": "",
		"lastModified": "",
		"created": "",
		"createdBy": "",
		"updatedBy": "",
		"endOfLines": 78,
	 },
	},
	"usageLocations": [
	 {
		"name": "Overlay",
		"source": "/koel/resources/assets/js/components/ui/Overlay.vue",
		"destination": "/koel/resources/assets/js/App.vue",
		"rows": [2],
		"deepestNested": 0,
		"fileInfo": {
		 "path": "",
		 "property": {
			"dataLastModified": "",
			"lastModified": "",
			"created": "",
			"createdBy": "",
			"updatedBy": "",
			"endOfLines": 192,
		 },
		},
	 },
	],
	"children": {
	 "total": 2,
	 "tags": ["SoundBars", "icon"],
	 "source": "/koel/resources/assets/js/components/ui/Overlay.vue",
	},
 },
 {
	"name": "DialogBox",
	"type": "internal",
	"usage": 1,
	"deepestNested": 4,
	"source": {
	 "path": "/koel/resources/assets/js/components/ui/DialogBox.vue",
	 "property": {
		"dataLastModified": "",
		"lastModified": "",
		"created": "",
		"createdBy": "",
		"updatedBy": "",
		"endOfLines": 164,
	 },
	},
	"usageLocations": [
	 {
		"name": "DialogBox",
		"source": "/koel/resources/assets/js/components/ui/DialogBox.vue",
		"destination": "/koel/resources/assets/js/App.vue",
		"rows": [3],
		"deepestNested": 0,
		"fileInfo": {
		 "path": "",
		 "property": {
			"dataLastModified": "",
			"lastModified": "",
			"created": "",
			"createdBy": "",
			"updatedBy": "",
			"endOfLines": 192,
		 },
		},
	 },
	],
	"children": {
	 "total": 2,
	 "tags": ["icon", "Btn"],
	 "source": "/koel/resources/assets/js/components/ui/DialogBox.vue",
	},
 },
];

You can scan to your workspace (Berryjam Cloud). After the scan, Berryjam triggers your Analytic Dashboard for insights and clarity. If you are interested to explore more, here is a demo dashboard.

Alternatively, if you would like to scan with the open-source Berryjam, please check our Github.

Alternatively, if you would like to scan with the open-source Berryjam, please check our Github.

Note: Berryjam CLI currently supports JavaScript / TypeScript, Vue.js (3.X) and Nuxt (3.X). The CLI scan is more accurate on TypeScript project. If you would like to request additional features, please submit your request here.