RM-FAMWORK

A custom React-like framework for building web applications, with a Next.js-like developer experience.

Installation

You can install RM-FAMWORK using npm:

npm install rm-famwork

Usage

Here's a basic example of how to use RM-FAMWORK in your project with the createRoot API:

// Assuming you have an HTML file with <div id="root"></div>
import { createElement, createRoot } from 'rm-famwork';

// Get the root DOM element
const container = document.getElementById('root');

// Create a root instance
const root = createRoot(container);

// Create an element (e.g., a simple div with text)
const appElement = createElement(
  'div',
  { id: 'app' },
  'Hello, RM-FAMWORK!'
);

// Render the element to the root
root.render(appElement);

To use JSX (recommended for a React-like experience):

First, ensure your build process (e.g., Babel) is configured to transpile JSX. You'll typically set the JSX pragma to React.createElement or jsx if you are using the jsx export from rm-famwork.

Example with JSX:

// Assuming you have an HTML file with <div id="root"></div>
import { createRoot, jsx } from 'rm-famwork'; // or import React from 'rm-famwork' and use React.createElement

// If using the jsx pragma directly:
/** @jsx jsx */
// Or configure Babel with: { "plugins": [["@babel/plugin-transform-react-jsx", { "pragma": "jsx" }]] }

const container = document.getElementById('root');
const root = createRoot(container);

const App = () => (
  <div id="app">
    <h1>Hello from RM-FAMWORK!</h1>
    <p>This is rendered using the new createRoot API and JSX.</p>
  </div>
);

root.render(<App />);

Development

RM-FAMWORK provides a Next.js-like CLI for an improved developer experience. To run a development server with hot reloading:

npx rm-famwork dev
# or if installed globally
# rm-famwork dev
# or via package.json script
# npm start

This will start the server, typically at http://localhost:3000.

Building for Production

To build your application for production:

npx rm-famwork build
# or if installed globally
# rm-famwork build
# or via package.json script
# npm run build

Configuration

RM-FAMWORK uses a Next.js-like configuration file named rm-famwork.config.js in your project root to customize your application. The CLI commands (rm-famwork dev and rm-famwork build) will automatically use this file.

Create a rm-famwork.config.js file in your project root. Here's an example:

// rm-famwork.config.js
module.exports = {
  // Set to true to enable React's StrictMode equivalent for RM-FAMWORK (if applicable)
  reactStrictMode: true,

  // Specify the output directory for the build (default is 'dist')
  distDir: 'dist',

  // Customize the underlying webpack configuration
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Example: Add a new rule or plugin
    // config.module.rules.push({ /* ... */ });
    // config.plugins.push(new webpack.DefinePlugin({ /* ... */ }));
    return config;
  },

  // Define environment variables accessible in your application
  env: {
    CUSTOM_VAR: 'my-value',
  },

  // Set a base path for your application if it's deployed under a sub-path
  basePath: '/my-app',

  // Configure page extensions (if your framework supports this concept for routing/pages)
  pageExtensions: ['js', 'jsx', 'ts', 'tsx'], // Supported file extensions for pages/components

  // Customize the entry point for your application (default is './src/index.js')
  // You can change this to './pages/index.js' or any other path.
  // webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  //   config.entry = './app/main.ts'; // Example: changing entry point
  //   return config;
  // },
};

TypeScript Support

RM-FAMWORK CLI now supports .ts and .tsx files out-of-the-box for transpilation via Babel.

If you are using TypeScript in your project, you will need to install typescript as a development dependency:

npm install --save-dev typescript

You may also want to create a tsconfig.json file in your project root to configure TypeScript options, for example:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve" // or "react-jsx" if using new JSX transform with React 17+
  },
  "include": ["src"]
}

Customizing Entry Point

The default entry point for your application when using the RM-FAMWORK CLI is ./src/index.js. If your main application file is located elsewhere (e.g., ./app/main.ts, ./pages/index.jsx), you can customize this by modifying the webpack configuration in your rm-famwork.config.js:

// rm-famwork.config.js
module.exports = {
  // ... other configurations
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Change the entry point
    config.entry = './path/to/your/entryfile.js'; // or .ts, .jsx, .tsx

    // You can also have multiple entry points
    // config.entry = {
    //   main: './src/main.js',
    //   admin: './src/admin.js'
    // };

    return config;
  },
};

Project Setup for Consumers

When using RM-FAMWORK in your own project, the core dependencies for the CLI (like webpack, babel-loader, @babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript) are now included as direct dependencies of rm-famwork.

However, you might still want to install specific versions or additional loaders/plugins for your project's needs:

# For TypeScript projects (if not already installed for other purposes)
npm install --save-dev typescript

# For specific Babel plugins or other webpack loaders (e.g., css-loader, style-loader)
# npm install --save-dev some-babel-plugin some-webpack-loader

Ensure your package.json scripts are set up to use the RM-FAMWORK CLI. The RM-FAMWORK package itself provides the rm-famwork command when installed.

// In your project's package.json
"scripts": {
  "dev": "rm-famwork dev",
  "build": "rm-famwork build"
  // If rm-famwork is installed locally in node_modules:
  // "dev": "npx rm-famwork dev",
  // "build": "npx rm-famwork build"
}

Documentation

For more detailed documentation, please refer to the GitHub repository or contact the author.

License

This project is licensed under the ISC License - see the LICENSE file for details.